chore: implement new design

Hubert Koster · Hubert Koster · commit 1af9d9a3b378 · 2023-07-21T16:04:50.000+02:00
diff --git a/src/features/dashboard/components/AppsTable/cells.module.scss b/src/features/dashboard/components/AppsTable/cells.module.scss
@@ -7,8 +7,6 @@
   cursor: pointer;
   padding: rem(2) rem(2);
   border-radius: 100%;
-  background-color: var(--colors-greyLight200);
-  border: 2px solid var(--colors-greyLight400);
 }
 
 .deleteApp {
@@ -25,6 +23,7 @@
   display: flex;
   gap: rem(2);
   margin: rem(3);
+  justify-content: center;
 }
 
 .tooltip {
diff --git a/src/features/dashboard/components/Table/scopes.cell.module.scss b/src/features/dashboard/components/Table/scopes.cell.module.scss
@@ -1,10 +1,13 @@
 @use 'src/styles/utility' as *;
 
 .scope {
+  display: inline-block;
   border: 1.6px solid var(--ifm-color-emphasis-400);
-  border-radius: 4px;
-  padding: rem(0.24) rem(0.24);
-  font-size: rem(1.1);
+  border-radius: 100vw; // pill shaped
+  padding: rem(0.25) rem(1);
+  font-size: rem(1.2);
+  margin: rem(0.5);
+  color: var(--ifm-color-emphasis-700);
 }
 
 .adminScope {
diff --git a/src/features/dashboard/components/Table/table.scss b/src/features/dashboard/components/Table/table.scss
@@ -8,26 +8,22 @@
   }
 
   thead {
-    background-color: var(--ifm-color-emphasis-200);
-    border: 3px solid var(--ifm-color-emphasis-200);
+    background-color: var(--ifm-color-emphasis-100);
+    border: 3px solid var(--ifm-color-emphasis-100);
     height: rem(5);
   }
 
   th,
   td {
-    text-align: left;
-    padding: rem(1.6);
-    min-width: rem(14.4);
-    max-width: rem(14.4);
-    overflow: visible;
-    text-overflow: ellipsis;
-    border: none;
+    display: table-cell;
+    border-left: none;
+    border-right: none;
+    border-bottom-color: var(--ifm-color-emphasis-200);
   }
 
   td:nth-child(3) {
-    display: flex;
-    flex-wrap: wrap;
-    gap: rem(0.64);
+    max-width: rem(20);
+    min-width: rem(15);
   }
 
   td:last-child,
@@ -43,9 +39,8 @@
   }
 
   tbody tr {
+    display: table-row;
     border: none;
-    &:nth-child(even) {
-      background-color: var(--ifm-color-emphasis-100);
-    }
+    background-color: var(--ifm-color-emphasis-0);
   }
 }
diff --git a/src/features/dashboard/components/Tabs/tabs.module.scss b/src/features/dashboard/components/Tabs/tabs.module.scss
@@ -50,6 +50,6 @@
   display: flex;
   justify-content: space-around;
   align-items: center;
-  padding: rem(2);
+  padding: rem(2) 5vw;
   overflow-y: auto;
 }
diff --git a/src/features/dashboard/manage-apps/manage-apps.module.scss b/src/features/dashboard/manage-apps/manage-apps.module.scss
@@ -5,6 +5,8 @@
   display: inline-block;
   overflow: auto;
   max-height: calc(100vh - rem(35));
+  border-top-left-radius: rem(1.6);
+  border-top-right-radius: rem(1.6);
 }
 
 @mixin actionIcon {
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -177,7 +177,7 @@ div[class*='sidebarViewport'] {
 }
 
 .navbar {
-  padding: 0 5%;
+  padding: 0 5vw;
   height: var(--nav-height);
   line-height: rem(2);
   @media (max-width: 996px) {
diff --git a/static/img/delete.svg b/static/img/delete.svg
@@ -1,3 +1 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.5 0C10.3284 0 11 0.671573 11 1.5V2H13.5C13.7761 2 14 2.22386 14 2.5C14 2.77614 13.7761 3 13.5 3H13V12.5C13 13.3284 12.3284 14 11.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3H0.5C0.223858 3 0 2.77614 0 2.5C0 2.22386 0.223858 2 0.5 2H3V1.5C3 0.671573 3.67157 0 4.5 0H9.5ZM12 3H2V12.5C2 12.7761 2.22386 13 2.5 13H11.5C11.7761 13 12 12.7761 12 12.5V3ZM7 5C7.27614 5 7.5 5.22386 7.5 5.5V10.5C7.5 10.7761 7.27614 11 7 11C6.72386 11 6.5 10.7761 6.5 10.5V5.5C6.5 5.22386 6.72386 5 7 5ZM9.5 5C9.77614 5 10 5.22386 10 5.5V10.5C10 10.7761 9.77614 11 9.5 11C9.22386 11 9 10.7761 9 10.5V5.5C9 5.22386 9.22386 5 9.5 5ZM4.5 5C4.77614 5 5 5.22386 5 5.5V10.5C5 10.7761 4.77614 11 4.5 11C4.22386 11 4 10.7761 4 10.5V5.5C4 5.22386 4.22386 5 4.5 5ZM9.5 1H4.5C4.22386 1 4 1.22386 4 1.5V2H10V1.5C10 1.22386 9.77614 1 9.5 1Z" fill="#333333"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" fill="none"><path fill="#414652" d="M5.188 14.063c0 .309-.254.562-.563.562a.564.564 0 0 1-.563-.563V6.189c0-.31.254-.563.563-.563.31 0 .563.253.563.563v7.875Zm3.375 0c0 .309-.254.562-.563.562a.564.564 0 0 1-.563-.563V6.189c0-.31.254-.563.563-.563.31 0 .563.253.563.563v7.875Zm3.374 0c0 .309-.253.562-.562.562a.564.564 0 0 1-.563-.563V6.189c0-.31.254-.563.563-.563.31 0 .563.253.563.563v7.875Zm-.91-13.27.942 1.457h3.344a.563.563 0 0 1 0 1.125h-.563v11.813A2.812 2.812 0 0 1 11.937 18H4.064a2.812 2.812 0 0 1-2.813-2.813V3.376H.687a.562.562 0 1 1 0-1.125h3.344L4.94.793A1.69 1.69 0 0 1 6.372 0h3.256c.58 0 1.121.3 1.399.793ZM5.36 2.25h5.28l-.538-.86a.558.558 0 0 0-.474-.265H6.372c-.193 0-.372.1-.474.264l-.538.861ZM2.375 15.188c0 .931.756 1.687 1.688 1.687h7.875c.931 0 1.687-.756 1.687-1.688V3.376H2.375v11.813Z"/></svg>
diff --git a/static/img/edit.svg b/static/img/edit.svg
@@ -1,3 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1464 1.14667C12.1701 0.122984 13.8299 0.122984 14.8536 1.14667C15.8772 2.17036 15.8772 3.83009 14.8536 4.85378L3.70711 16.0002H0V12.2931L11.1464 1.14667ZM14.1464 1.85378C13.5133 1.22062 12.4867 1.22062 11.8536 1.85378L11.2071 2.50021L13.5 4.79311L14.1464 4.14667C14.7796 3.51351 14.7796 2.48694 14.1464 1.85378ZM12.7929 5.50021L10.5 3.20732L2.70712 11.0002L5.00001 13.2931L12.7929 5.50021ZM1 12.7073L2.00001 11.7073L4.29291 14.0002L3.29289 15.0002H1V12.7073Z" fill="#333333"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none"><path fill="#414652" d="M17.402 2.095c.77.77.77 2.015 0 2.785L6.41 15.877c-.4.397-.893.689-1.434.85L.72 17.98a.563.563 0 0 1-.698-.7l1.25-4.254c.16-.541.453-1.033.852-1.434L13.12.597a1.97 1.97 0 0 1 2.785 0l1.497 1.498ZM11.988 3.32l2.693 2.661 1.927-1.895a.843.843 0 0 0 0-1.194L15.11 1.392a.847.847 0 0 0-1.195 0L11.988 3.32Zm-.794.794L2.92 12.39a2.23 2.23 0 0 0-.567.956l-.96 3.263 3.262-.96c.362-.105.692-.302.956-.57l8.244-8.272-2.661-2.693Z"/></svg>

Original file line number	Diff line number	Diff line change
`@@ -7,8 +7,6 @@`
`7`	`7`	`cursor: pointer;`
`8`	`8`	`padding: rem(2) rem(2);`
`9`	`9`	`border-radius: 100%;`
`10`		`- background-color: var(--colors-greyLight200);`
`11`		`- border: 2px solid var(--colors-greyLight400);`
`12`	`10`	`}`
`13`	`11`
`14`	`12`	`.deleteApp {`
`@@ -25,6 +23,7 @@`
`25`	`23`	`display: flex;`
`26`	`24`	`gap: rem(2);`
`27`	`25`	`margin: rem(3);`
	`26`	`+ justify-content: center;`
`28`	`27`	`}`
`29`	`28`
`30`	`29`	`.tooltip {`
Original file line number	Diff line number	Diff line change
`@@ -50,6 +50,6 @@`
`50`	`50`	`display: flex;`
`51`	`51`	`justify-content: space-around;`
`52`	`52`	`align-items: center;`
`53`		`- padding: rem(2);`
	`53`	`+ padding: rem(2) 5vw;`
`54`	`54`	`overflow-y: auto;`
`55`	`55`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,8 @@`
`5`	`5`	`display: inline-block;`
`6`	`6`	`overflow: auto;`
`7`	`7`	`max-height: calc(100vh - rem(35));`
	`8`	`+ border-top-left-radius: rem(1.6);`
	`9`	`+ border-top-right-radius: rem(1.6);`
`8`	`10`	`}`
`9`	`11`
`10`	`12`	`@mixin actionIcon {`
Original file line number	Diff line number	Diff line change
`@@ -177,7 +177,7 @@ div[class*='sidebarViewport'] {`
`177`	`177`	`}`
`178`	`178`
`179`	`179`	`.navbar {`
`180`		`- padding: 0 5%;`
	`180`	`+ padding: 0 5vw;`
`181`	`181`	`height: var(--nav-height);`
`182`	`182`	`line-height: rem(2);`
`183`	`183`	`@media (max-width: 996px) {`