significantly improve for dao name styles (#2180)

daostack · Oct 7, 2020 · fa994ca · fa994ca
1 parent f63072e
commit fa994ca
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 50 deletions.
diff --git a/src/layouts/SidebarMenu.scss b/src/layouts/SidebarMenu.scss
@@ -19,58 +19,24 @@
   background-color: $sky;
 
   .daoName {
+    display: flex;
+    align-items: center;
     padding: 20px;
-    flex-grow: 0;
+    font-size: 30px;
 
-    a {
-      display: block;
-      position: relative;
-      font-size: 29px;
-      line-height: 29px;
-      font-weight: bold;
-
-      .daoIcon {
-        width: 40px;
-        height: 40px;
-        display: inline-block;
-        border-radius: 40px;
-        background-repeat: repeat;
-      }
-
-      em {
-        width: 50px;
-        height: 50px;
-        position: absolute;
-        opacity: 0.5;
-        z-index: 0;
-        background-color: rgba(255, 255, 255, 0.5);
-        top: -5px;
-        left: -5px;
-        border-radius: 50px;
-      }
-
-      b {
-        position: relative;
-        z-index: 100;
-      }
-      span {
-        position: absolute;
-        padding-left: 60px;
-        top: 50%;
-        left: 0;
-        margin-top: -3px;
-        transform: translateY(-50%);
-      }
-    }
-
-    a:visited {
-      color: $white;
+    .daoIcon {
+      width: 40px;
+      height: 40px;
+      display: inline-block;
+      border-radius: 40px;
     }
 
-    p {
-      font-size: 14px;
-      opacity: 0.7;
-      padding: 0;
+    a {
+      display: flex;
+      border-radius: 50%;
+      background-color: $white-halftone;
+      margin-right: 10px;
+      padding: 5px;
     }
   }
 

diff --git a/src/layouts/SidebarMenu.tsx b/src/layouts/SidebarMenu.tsx
@@ -95,9 +95,8 @@ class SidebarMenu extends React.Component<IProps, IStateProps> {
         <div className={css.daoName}>
           <Link to={"/dao/" + dao.address} onClick={this.handleCloseMenu}>
             <b className={css.daoIcon} style={{ backgroundImage: bgPattern.toDataUrl() }}></b>
-            <em></em>
-            <span>{dao.name}</span>
           </Link>
+          <span>{dao.name}</span>
         </div>
         <div className={css.daoDescription}>
           {dao.name === "dxDAO" ?