update: new class to handle the main padding + HD colors handle for the directory component

client.sample.happy-dev.css

@@ -108,6 +108,23 @@
   --color-chat-grey-1: var(--color-grey-4);
   --color-chat-grey-2: var(--color-grey-6);
   --color-chat-grey-3: var(--color-grey-10);
+
+  /* Directory */
+  --color-directory-grey-4: #7A7F85;
+  --color-directory-grey-5: #F0F3F6;
+
+  --color-directory-avatar-background: #E4E8ED;
+  --color-directory-back-link: #36383B;
+  --color-directory-border: #DAE2F3;
+  --color-directory-content-header-border: #DAE2F3;
+  --color-directory-h1: var(--color-complementary-darken);
+  --color-directory-list-icon: var(--color-primary);
+  --color-directory-text: var(--color-directory-grey-4);
+
+  --color-directory-form-input: #EDF1FA;
+  --color-directory-form-input-text: var(--color-directory-grey-4);
+  --color-directory-form-input-active: var(--color-complementary);
+  --color-directory-form-select-icon: var(--color-complementary);
 }
 
 /* Button to edit a channel or a project (in project-profile) */
@@ -174,3 +191,21 @@
 #admin-circle-list>div>div.table>sib-display:nth-child(5)>div>sib-display>div>admin-circle-join-button>sib-form:hover input {
   color: var(--color-complementary);
 }
+
+
+/* Directory - my profile*/
+
+/* Button to update the avatar */
+#sib-picture-browse,
+#sib-picture-remove {
+  background-color: var(--color-white);
+  border: 1px solid var(--color-complementary);
+  color: var(--color-complementary);
+}
+
+#sib-picture-browse:hover,
+#sib-picture-remove:hover {
+  background-color: var(--color-complementary);
+  border: 1px solid var(--color-complementary);
+  color: var(--color-white);
+}

src/index.pug

@@ -22,15 +22,15 @@ html(lang="en")
       div#viewport
 
         if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
-          #dashboard(hidden).no-sidebar
+          #dashboard(hidden).no-sidebar.with-padding
             include page-dashboard.pug
 
         if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
-          #members(hidden).no-sidebar
+          #members(hidden).no-sidebar.with-padding
             include page-directory.pug
 
         if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
-          #job-offers(hidden).no-sidebar
+          #job-offers(hidden).no-sidebar.with-padding
             include page-job-offers.pug
 
         if endpoints.projects || (endpoints.get && endpoints.get.projects)

src/styles/base/main.scss

@@ -153,7 +153,6 @@ h5 {
 }
 
 %padding-main {
-  /*padding: 5rem;*/
   padding: 1.3rem;
 }
 

src/styles/components/sidebar.scss

@@ -1,7 +1,10 @@
 .no-sidebar {
   flex: 1;
+
+  &.with-padding {
     @extend %padding-main;
   }
+}
 
 .with-sidebar {
   flex-grow: 1;