ux update

src/Common.css

@@ -55,7 +55,6 @@
     font-size: .9em;
     vertical-align: .05em;
     cursor: inherit;
-}
+    padding: 0 .1rem;
-.icon+label::before {
+    margin-left: .15rem;
-    content: ' ';
 }

src/Flows.js

@@ -342,6 +342,15 @@ class FlowSidebar extends PureComponent {
             replies_cnt[r.name]++;
         });
 
+        let main_thread_elem=(
+            <ClickHandler callback={(e)=>{this.show_reply_bar('',e);}}>
+                <FlowItem info={this.state.info} attention={this.state.attention} img_clickable={true}
+                          color_picker={this.color_picker} show_pid={show_pid} replies={this.state.replies}
+                          set_variant={(variant)=>{this.set_variant(null,variant);}}
+                />
+            </ClickHandler>
+        );
+
         return (
             <div className="flow-item-row sidebar-flow-item">
                 <div className="box box-tip">
@@ -356,10 +365,14 @@ class FlowSidebar extends PureComponent {
                     <a onClick={this.load_replies.bind(this)}>
                         <span className="icon icon-refresh" /><label>刷新</label>
                     </a>
-                    &nbsp;&nbsp;
+                    {(this.state.replies.length>1 || this.state.rev) &&
-                    <a onClick={this.toggle_rev.bind(this)}>
+                        <span>
-                        <span className="icon icon-order-rev" /><label>{this.state.rev ? '还原' : '逆序'}</label>
+                            &nbsp;&nbsp;
-                    </a>
+                            <a onClick={this.toggle_rev.bind(this)}>
+                                <span className="icon icon-order-rev" /><label>{this.state.rev ? '还原' : '逆序'}</label>
+                            </a>
+                        </span>
+                    }
                     {!!this.props.token &&
                         <span>
                             &nbsp;&nbsp;
@@ -374,12 +387,9 @@ class FlowSidebar extends PureComponent {
                         </span>
                     }
                 </div>
-                <ClickHandler callback={(e)=>{this.show_reply_bar('',e);}}>
+                {!this.state.rev &&
-                    <FlowItem info={this.state.info} attention={this.state.attention} img_clickable={true}
+                    main_thread_elem
-                        color_picker={this.color_picker} show_pid={show_pid} replies={this.state.replies}
+                }
-                        set_variant={(variant)=>{this.set_variant(null,variant);}}
-                    />
-                </ClickHandler>
                 {!!this.state.error_msg &&
                     <div className="box box-tip flow-item">
                         <p>回复加载失败</p>
@@ -411,6 +421,9 @@ class FlowSidebar extends PureComponent {
                         </ClickHandler>
                     </LazyLoad>
                 ))}
+                {this.state.rev &&
+                    main_thread_elem
+                }
                 {!!this.props.token ?
                     <ReplyForm pid={this.state.info.pid} token={this.props.token}
                                area_ref={this.reply_ref} on_complete={this.load_replies.bind(this)} /> :

src/Sidebar.js

@@ -23,7 +23,7 @@ export class Sidebar extends PureComponent {
                     {this.props.content}
                 </div>
                 <div className="sidebar-title">
-                    <a onClick={this.props.do_close}>&nbsp;<span className="icon icon-back" />&nbsp;</a>
+                    <a className="no-underline" onClick={this.props.do_close}>&nbsp;<span className="icon icon-back" />&nbsp;</a>
                     {this.props.title}
                 </div>
             </div>

src/Title.js

@@ -130,18 +130,18 @@ class ControlBar extends PureComponent {
         return (
             <TokenCtx.Consumer>{({value: token})=>(
                 <div className="control-bar">
-                    <a className="control-btn" onClick={this.do_refresh_bound}>
+                    <a className="no-underline control-btn" onClick={this.do_refresh_bound}>
                         <span className="icon icon-refresh" />
                     </a>
                     {!!token &&
-                        <a className="control-btn" onClick={this.do_attention_bound}>
+                        <a className="no-underline control-btn" onClick={this.do_attention_bound}>
                             <span className="icon icon-attention" />
                         </a>
                     }
                     <input className="control-search" value={this.state.search_text} placeholder="搜索 或 #PID"
                            onChange={this.on_change_bound} onKeyPress={this.on_keypress_bound}
                     />
-                    <a className="control-btn" onClick={()=>{
+                    <a className="no-underline control-btn" onClick={()=>{
                         this.props.show_sidebar(
                             'P大树洞',
                             <div>
@@ -170,7 +170,7 @@ class ControlBar extends PureComponent {
                         <span className={'icon icon-'+(token ? 'about' : 'login')} />
                     </a>
                     {!!token &&
-                        <a className="control-btn" onClick={()=>{
+                        <a className="no-underline control-btn" onClick={()=>{
                             this.props.show_sidebar(
                                 '发表树洞',
                                 <PostForm token={token} on_complete={()=>{

src/index.css

@@ -15,12 +15,19 @@ html {
     scrollbar-width: none;
 }
 
-a {
+:root {
-    color: #00c;
+    --var-link-color: #00c;
+}
+.root-dark-mode .left-container, .root-dark-mode .sidebar, .root-dark-mode .sidebar-title, .root-dark-mode .balance-popover {
+    --var-link-color: #9bf;
 }
 
-.root-dark-mode .left-container a, .root-dark-mode .sidebar a, .root-dark-mode .sidebar-title a, .root-dark-mode .balance-popover a {
+a {
-    color: #9bf;
+    color: var(--var-link-color);
+}
+a:not(.no-underline):hover {
+    border-bottom: 1px solid var(--var-link-color);
+    margin-bottom: -1px;
 }
 
 input, textarea {