Merge pull request #256 from erikaperugachi/design

Design

Author: Erika Perugachi

electron_app/build/[email protected]

@@ -10,7 +10,6 @@ const SideBar = props => (
   <aside className="sidebar-app">
     <header onClick={() => props.onToggleSideBar()}>
       <div className="header-icon" />
-      <i className="icon-criptext" />
     </header>
     <div className="navigation-partial-mail">
       <div className="nav-item-free">

email_mailbox/src/animations/lock.json

@@ -61,7 +61,7 @@ const Article = props => {
 const renderDots = itemSelected => (
   <div className="dots-container">
     {Object.keys(data).map((item, index) => {
-      const dotSelected = itemSelected === item;
+      const dotSelected = itemSelected === Number(item);
       return (
         <div key={index} className={'dot' + (dotSelected ? ' selected' : '')} />
       );

email_mailbox/src/components/SideBar.js

@@ -20,7 +20,7 @@ aside.navigation-feed-container{
   top: 0px;
 
   header{
-    background-color: #f7f7f8;
+    background-color: #373a45;
     height: $_HEIGHT_HEADER;
     width: 288px;
 
@@ -38,7 +38,7 @@ aside.navigation-feed-container{
         i {
           position: relative;
           top: calc(50% - 13px);
-          color: #000000;
+          color: white;
         }
 
         .badge {
@@ -79,13 +79,12 @@ aside.navigation-feed-container{
         height: 20px;
         margin: 0%;
         float: left;
-        font-weight: 900;
+        font-weight: 700;
         text-align: left;
-        color: #000000;
+        color: white;
       }
 
       .header-button {
-        background-color: #0091ff;
         cursor: pointer;
         float: right;
         font-size: 24px;

email_mailbox/src/components/Welcome.js

@@ -19,7 +19,7 @@
 
 .activity-panel-shortcut-content{
   align-items: center;
-  background-color: #0091ff;
+  background-color: #373a45;
   display: flex;
   height: 100%;
   position: relative;
@@ -32,7 +32,7 @@
     position: absolute;
     left: -8px;
     top: 24px;
-    border-right: 8px solid #0091ff;
+    border-right: 8px solid #373a45;
     border-top: 8px solid transparent;
     border-bottom: 8px solid transparent;
   }

email_mailbox/src/components/activitypanel.scss

@@ -6,21 +6,19 @@
 
   header{
     align-items: center;
+    background-color: #373a45;
     cursor: pointer;
     display: flex;
     height: $_HEIGHT_HEADER;
     position: relative;
-
-    i{
-      display: none;
-    }
   }
 }
 
 .header-icon{
   align-items: center;
-  background-image: url(../#{$_PATH_TO_IMAGES}/header-icon.png);
+  background-image: url(../#{$_PATH_TO_IMAGES}/header-icon.svg);
   background-position: center;
+  background-repeat: no-repeat;
   background-size: 100%;
   height: 36px;
   margin: 0 auto;
@@ -137,11 +135,17 @@
   width: 210px;
 }
 
+@mixin collapse-header-icon{
+  background-image: url(../#{$_PATH_TO_IMAGES}/header-icon-mini.svg);
+  background-size: auto 100%;
+  width: 100%;
+}
+
 .sidebar-app-collapse .sidebar-app{
   width: 79px;
 
   header{
-    background-color: #0091ff;
+    background-color: #373a45;
 
     &:before{
       content: '';
@@ -150,21 +154,14 @@
       position: absolute;
       right: -8px;
       top: 24px;
-      border-left: 8px solid #0091ff;
+      border-left: 8px solid #373a45;
       border-top: 8px solid transparent;
       border-bottom: 8px solid transparent;
     }
-
-    i{
-      color: white;
-      display: inline;
-      font-size: 38px;
-      margin: 0 auto;
-    }
   }
 
   .header-icon{
-    display: none;
+    @include collapse-header-icon;
   }
 
   button.button-compose{
@@ -205,23 +202,16 @@
     width: 79px;
 
     header{
-      background-color: #0091ff;
+      background-color: #373a45;
 
       &:before{
         display: none;
       }
-
-      i{
-        color: white;
-        display: inline;
-        font-size: 38px;
-        margin: 0 auto;
-      }
     }
   }
 
   .header-icon{
-    display: none;
+    @include collapse-header-icon;
   }
 
   button.button-compose{

email_mailbox/src/components/activitypanelshortcut.scss

@@ -74,23 +74,61 @@
   top: 5px;
 }
 
+@mixin collapse-nav-item-badge-mini {
+  right: 28px;
+  top: 10px;
+}
+
+@mixin collapse-badge {
+  border: 1px solid white;
+  border-radius: 6px;
+  font-size: 0;
+  height: 7px;
+  min-width: 0px;
+  width: 5px;
+}
+
 .sidebar-app-collapse .nav-item{
-  .nav-item-icon{
-    @include collapse-nav-item-icon;
-  }
-  .nav-item-badge{
-    @include collapse-nav-item-badge
-  }
+
+    &:nth-child(n+2){
+      .badge{
+        @include collapse-badge;
+      }
+
+      .nav-item-badge{
+        @include collapse-nav-item-badge-mini;
+      }
+    }
+
+    .nav-item-icon{
+      @include collapse-nav-item-icon;
+    }
+
+    .nav-item-badge{
+      @include collapse-nav-item-badge;
+      
+    }
 }
 
 @media screen and (max-width: $_MAX_WIDTH_SCREEN) {
   .nav-item{
+
+    &:nth-child(n+2){
+      .badge{
+        @include collapse-badge;
+      }
+
+      .nav-item-badge{
+        @include collapse-nav-item-badge-mini;
+      }
+    }
+
     .nav-item-icon{
       @include collapse-nav-item-icon;
     }
 
     .nav-item-badge{
-      @include collapse-nav-item-badge
+      @include collapse-nav-item-badge;
     }
   }
 }

email_mailbox/src/components/sidebar.scss

@@ -54,14 +54,15 @@ $_SIZE_BUTTON_CIRCLE: 38px;
       width: 100%;
 
       .dot{
+        background-color: #bbbbbb;
         border-radius: 50%;
         height: 9px;
         margin: 3px;
         width: 9px;
-        background-color: #bbbbbb;
+        opacity: 0.6;
 
         &.selected{
-          opacity: 0.6;
+          opacity: 1;
         }
       }
     }