Merge pull request #270 from SELab-2/frontend-cleanup

♻️ frontend cleanup
SELab-2 · Apr 20, 2023 · 7e56223 · 7e56223
2 parents 8b6cdce + c775ce1
commit 7e56223
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 36 deletions.
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/public/favicon_beer.ico b/frontend/public/favicon_beer.ico
diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
@@ -8,7 +8,7 @@ export default function Layout({ children }) {
   return (
     <div className={"h-screen w-screen flex"}>
       <Head>
-        <link rel="icon" href="/favicon_beer.ico" />
+        <link rel="icon" href="/favicon.ico" />
       </Head>
 
       {status === "authenticated" && <Navbar />}

diff --git a/frontend/src/components/MobileLayout.jsx b/frontend/src/components/MobileLayout.jsx
@@ -8,7 +8,7 @@ export default function MobileLayout({ children }) {
   return (
     <div className={"h-screen w-screen flex flex-col"}>
       <Head>
-        <link rel="icon" href="/favicon_beer.ico" />
+        <link rel="icon" href="./favicon.ico" />
       </Head>
 
       <main className={"grow overflow-auto relative"}>{children}</main>

diff --git a/frontend/src/components/selection/SelectionList.jsx b/frontend/src/components/selection/SelectionList.jsx
@@ -15,7 +15,7 @@ export default function SelectionList({
       title={title}
       text={""}
     >
-      <div className="overflow-y-scroll space-y-2 rounded-lg h-40 grow">
+      <div className="overflow-y-scroll space-y-2 rounded-lg h-40 grow pr-1">
         <Selection
           list={elements}
           Component={Component}

diff --git a/frontend/src/pages/admin/planningen/[pid].jsx b/frontend/src/pages/admin/planningen/[pid].jsx
@@ -319,13 +319,11 @@ export default function AdminTourPage() {
                   </div>
                 </SecondaryCard>
                 <SecondaryCard
-                  className={"basis-3/5"}
+                  className={"basis-3/5 overflow-hidden"}
                   icon={faBriefcase}
                   title={"Progress"}
                 >
-                  <div
-                    className={"flex justify-center items-center h-4/5 pb-2"}
-                  >
+                  <div className={"flex justify-center items-center pb-2"}>
                     <div
                       className={"flex items-center justify-center space-x-2"}
                     >
@@ -352,7 +350,7 @@ export default function AdminTourPage() {
                 title={"Opmerkingen"}
                 className={"sm:w-2/6 basis-1/3"}
               >
-                <div className={"space-y-2 overflow-auto h-full"}>
+                <div className={"space-y-2 overflow-auto"}>
                   {comments.map((entry, index) => (
                     <div key={index} className={"rounded-lg bg-light-bg-1 p-2"}>
                       <h1 className={"text-light-h-1 font-bold text-base"}>

diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
@@ -6,49 +6,64 @@
 @tailwind utilities;
 
 :root {
-	--color-light-bg-1: #FFFFFF;
-	--color-light-bg-2: #F6F8FA;
-	--color-light-h-1: #000000;
-	--color-light-h-2: #B2B2B2;
-	--color-light-text: #4D4D4D;
+    --color-light-bg-1: #FFFFFF;
+    --color-light-bg-2: #F6F8FA;
+    --color-light-h-1: #000000;
+    --color-light-h-2: #B2B2B2;
+    --color-light-text: #4D4D4D;
 
-	--color-dark-bg-1: #101010;
-	--color-dark-bg-2: #1c1c1c;
-	--color-dark-h-1: #FFFFFF;
-	--color-dark-h-2: #4D4D4D;
-	--color-dark-text: #B2B2B2;
+    --color-dark-bg-1: #101010;
+    --color-dark-bg-2: #1c1c1c;
+    --color-dark-h-1: #FFFFFF;
+    --color-dark-h-2: #4D4D4D;
+    --color-dark-text: #B2B2B2;
 
-	--color-accent-1: #E6E600;
-	--color-accent-2: #585936;
+    --color-accent-1: #E6E600;
+    --color-accent-2: #585936;
 
-	--color-primary-1: #377DFF;
-	--color-primary-2: #D7E5FF;
-	--color-primary-3: #2c66d3;
+    --color-primary-1: #377DFF;
+    --color-primary-2: #D7E5FF;
+    --color-primary-3: #2c66d3;
 
-	--color-done-1: #8250DF;
-	--color-done-2: #D6CCED;
+    --color-done-1: #8250DF;
+    --color-done-2: #D6CCED;
 
-	--color-good-1: #2DA44C;
-	--color-good-2: #CEF5D2;
+    --color-good-1: #2DA44C;
+    --color-good-2: #CEF5D2;
 
-	--color-meh-1: #D29922;
-	--color-meh-2: #FFDCCC;
+    --color-meh-1: #D29922;
+    --color-meh-2: #FFDCCC;
 
-	--color-bad-1: #CF222E;
-	--color-bad-2: #FFD4DF;
+    --color-bad-1: #CF222E;
+    --color-bad-2: #FFD4DF;
 }
 
 
 html {
-	font-family: 'Inter', sans-serif;
+    font-family: 'Inter', sans-serif;
 }
 
 .emoji {
-		font-family: 'Noto Color Emoji', sans-serif;
+    font-family: 'Noto Color Emoji', sans-serif;
 }
 
 body {
-	@apply bg-light-bg-2;
-	@apply text-light-text;
-	@apply text-base;
+    @apply bg-light-bg-2;
+    @apply text-light-text;
+    @apply text-base;
 }
+
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    border-radius: 8px;
+    background-color: var(--color-light-h-2);
+    border: 1px solid #cacaca;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: var(--color-dark-h-2);
+}