From 7fabc5ce7f4559e3b2c3a9c8548541e770488e16 Mon Sep 17 00:00:00 2001
From: Sivert <sivertgh@stud.ntnu.no>
Date: Sat, 23 Sep 2023 00:57:54 +0200
Subject: [PATCH] Added colors and updated each page with new grid

---
 dev/src/app/components/avatars/page.tsx       |   4 +-
 dev/src/app/components/badges/page.tsx        | 184 +++++++++---------
 .../components/buttons/icons_only/page.tsx    |   4 +-
 dev/src/app/components/buttons/page.tsx       |   4 +-
 .../app/components/buttons/regular/page.tsx   |   4 +-
 .../app/components/buttons/with_icon/page.tsx |   4 +-
 dev/src/app/components/colors/layout.tsx      |  14 ++
 dev/src/app/components/colors/page.tsx        |  78 ++++++++
 dev/src/app/components/inputs/page.tsx        |   4 +-
 dev/src/app/components/servercards/page.tsx   |  32 +--
 dev/src/app/page.tsx                          |   6 +-
 dev/src/navbar.json                           |   3 +-
 dev/src/navbar_names.json                     |   1 +
 13 files changed, 215 insertions(+), 127 deletions(-)
 create mode 100644 dev/src/app/components/colors/layout.tsx
 create mode 100644 dev/src/app/components/colors/page.tsx

diff --git a/dev/src/app/components/avatars/page.tsx b/dev/src/app/components/avatars/page.tsx
index 084d6df..93d7990 100644
--- a/dev/src/app/components/avatars/page.tsx
+++ b/dev/src/app/components/avatars/page.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 
 export default function badges() {
   return (
-    <React.Fragment>
+    <div className='grid grid-cols-2 gap-12'>
       <Section header='Rounded'>
         <Avatar src='/images/duck.jpeg' status='online' />
         <Avatar src='/images/cowboy.jpeg' />
@@ -22,6 +22,6 @@ export default function badges() {
         <Avatar src='/images/cowboy.jpeg' type='square' />
         <Avatar src='/images/cat.png' type='square' status='ingame' />
       </Section>
-    </React.Fragment>
+    </div>
   )
 }
diff --git a/dev/src/app/components/badges/page.tsx b/dev/src/app/components/badges/page.tsx
index 732e12c..c04b2ff 100644
--- a/dev/src/app/components/badges/page.tsx
+++ b/dev/src/app/components/badges/page.tsx
@@ -14,104 +14,96 @@ import { Badge } from '@/index'
 
 export default function badges() {
   return (
-    <React.Fragment>
-      <div
-        className='grid gap-9 place-content-center w-full'
-        style={{
-          gridTemplateColumns: 'repeat(auto-fit, 280px)',
-          gridAutoFlow: 'dense'
-        }}
-      >
-        <div className='flex flex-col gap-2 items-center'>
-          <h1 className='font-semibold text-lg'>Regular</h1>
-          <Badge>Normal</Badge>
-          <Badge type='badge-primary'>Primary</Badge>
-          <Badge type='badge-secondary'>Secondary</Badge>
-          <Badge type='badge-accent'>Accent</Badge>
-          <Badge type='badge-ghost'>Ghost</Badge>
-          <Badge type='badge-outline'>Outline</Badge>
-          <Badge type='badge-error'>Error</Badge>
-          <Badge type='badge-warning'>Warning</Badge>
-          <Badge type='badge-info'>Info</Badge>
-          <Badge type='badge-success'>Success</Badge>
-        </div>
+    <div className='grid grid-cols-6 gap-12'>
+      <div className='flex flex-col gap-2 items-center'>
+        <h1 className='font-semibold text-lg'>Regular</h1>
+        <Badge>Normal</Badge>
+        <Badge type='badge-primary'>Primary</Badge>
+        <Badge type='badge-secondary'>Secondary</Badge>
+        <Badge type='badge-accent'>Accent</Badge>
+        <Badge type='badge-ghost'>Ghost</Badge>
+        <Badge type='badge-outline'>Outline</Badge>
+        <Badge type='badge-error'>Error</Badge>
+        <Badge type='badge-warning'>Warning</Badge>
+        <Badge type='badge-info'>Info</Badge>
+        <Badge type='badge-success'>Success</Badge>
+      </div>
 
-        <div className='flex flex-col gap-2 items-center'>
-          <h1 className='font-semibold text-lg'>Icon and text</h1>
-          <Badge>
-            <BsCartFill className='w-4 h-4' /> Normal
-          </Badge>
-          <Badge type='badge-primary'>
-            <BsHandIndexFill className='w-4 h-4' /> Primary
-          </Badge>
-          <Badge type='badge-secondary'>
-            <BsCheckCircleFill className='w-4 h-4' />
-            Secondary
-          </Badge>
-          <Badge type='badge-accent'>
-            <BsXCircleFill className='w-4 h-4' />
-            Accent
-          </Badge>
-          <Badge type='badge-ghost'>
-            <BsCalendarEventFill className='w-4 h-4' />
-            Ghost
-          </Badge>
-          <Badge type='badge-outline'>
-            <BsDoorOpenFill className='w-4 h-4' />
-            Outline
-          </Badge>
-          <Badge type='badge-error'>
-            <BsExclamationTriangleFill className='w-4 h-4' />
-            Error
-          </Badge>
-          <Badge type='badge-warning'>
-            <BsFillExclamationCircleFill className='w-4 h-4' />
-            Warning
-          </Badge>
-          <Badge type='badge-info'>
-            <BsInfoSquareFill className='w-4 h-4' />
-            Info
-          </Badge>
-          <Badge type='badge-success'>
-            <BsCheckCircleFill className='w-4 h-4' />
-            Success
-          </Badge>
-        </div>
+      <div className='flex flex-col gap-2 items-center'>
+        <h1 className='font-semibold text-lg'>Icon and text</h1>
+        <Badge>
+          <BsCartFill className='w-4 h-4' /> Normal
+        </Badge>
+        <Badge type='badge-primary'>
+          <BsHandIndexFill className='w-4 h-4' /> Primary
+        </Badge>
+        <Badge type='badge-secondary'>
+          <BsCheckCircleFill className='w-4 h-4' />
+          Secondary
+        </Badge>
+        <Badge type='badge-accent'>
+          <BsXCircleFill className='w-4 h-4' />
+          Accent
+        </Badge>
+        <Badge type='badge-ghost'>
+          <BsCalendarEventFill className='w-4 h-4' />
+          Ghost
+        </Badge>
+        <Badge type='badge-outline'>
+          <BsDoorOpenFill className='w-4 h-4' />
+          Outline
+        </Badge>
+        <Badge type='badge-error'>
+          <BsExclamationTriangleFill className='w-4 h-4' />
+          Error
+        </Badge>
+        <Badge type='badge-warning'>
+          <BsFillExclamationCircleFill className='w-4 h-4' />
+          Warning
+        </Badge>
+        <Badge type='badge-info'>
+          <BsInfoSquareFill className='w-4 h-4' />
+          Info
+        </Badge>
+        <Badge type='badge-success'>
+          <BsCheckCircleFill className='w-4 h-4' />
+          Success
+        </Badge>
+      </div>
 
-        <div className='flex flex-col gap-2 items-center'>
-          <h1 className='font-semibold text-lg'>Icons only</h1>
-          <Badge>
-            <BsCartFill className='w-4 h-4' />
-          </Badge>
-          <Badge type='badge-primary'>
-            <BsHandIndexFill className='w-4 h-4' />
-          </Badge>
-          <Badge type='badge-secondary'>
-            <BsCheckCircleFill className='w-4 h-4' />
-          </Badge>
-          <Badge type='badge-accent'>
-            <BsXCircleFill className='w-4 h-4' />
-          </Badge>
-          <Badge type='badge-ghost'>
-            <BsCalendarEventFill className='w-4 h-4' />
-          </Badge>
-          <Badge type='badge-outline'>
-            <BsDoorOpenFill className='w-4 h-4' />
-          </Badge>
-          <Badge type='badge-error'>
-            <BsExclamationTriangleFill className='w-4 h-4' />
-          </Badge>
-          <Badge type='badge-warning'>
-            <BsFillExclamationCircleFill className='w-4 h-4' />
-          </Badge>
-          <Badge type='badge-info'>
-            <BsInfoSquareFill className='w-4 h-4' />
-          </Badge>
-          <Badge type='badge-success'>
-            <BsCheckCircleFill className='w-4 h-4' />
-          </Badge>
-        </div>
+      <div className='flex flex-col gap-2 items-center'>
+        <h1 className='font-semibold text-lg'>Icons only</h1>
+        <Badge>
+          <BsCartFill className='w-4 h-4' />
+        </Badge>
+        <Badge type='badge-primary'>
+          <BsHandIndexFill className='w-4 h-4' />
+        </Badge>
+        <Badge type='badge-secondary'>
+          <BsCheckCircleFill className='w-4 h-4' />
+        </Badge>
+        <Badge type='badge-accent'>
+          <BsXCircleFill className='w-4 h-4' />
+        </Badge>
+        <Badge type='badge-ghost'>
+          <BsCalendarEventFill className='w-4 h-4' />
+        </Badge>
+        <Badge type='badge-outline'>
+          <BsDoorOpenFill className='w-4 h-4' />
+        </Badge>
+        <Badge type='badge-error'>
+          <BsExclamationTriangleFill className='w-4 h-4' />
+        </Badge>
+        <Badge type='badge-warning'>
+          <BsFillExclamationCircleFill className='w-4 h-4' />
+        </Badge>
+        <Badge type='badge-info'>
+          <BsInfoSquareFill className='w-4 h-4' />
+        </Badge>
+        <Badge type='badge-success'>
+          <BsCheckCircleFill className='w-4 h-4' />
+        </Badge>
       </div>
-    </React.Fragment>
+    </div>
   )
 }
diff --git a/dev/src/app/components/buttons/icons_only/page.tsx b/dev/src/app/components/buttons/icons_only/page.tsx
index 145d8da..e49b955 100644
--- a/dev/src/app/components/buttons/icons_only/page.tsx
+++ b/dev/src/app/components/buttons/icons_only/page.tsx
@@ -15,7 +15,7 @@ import {
 
 export default function page() {
   return (
-    <React.Fragment>
+    <div className='grid grid-cols-6 gap-12'>
       <Button iconOnly='btn-square'>
         <BsCartFill className='w-4 h-4' />
       </Button>
@@ -55,6 +55,6 @@ export default function page() {
       <Button type='btn-link' iconOnly='btn-square'>
         <BsLink className='w-4 h-4' />
       </Button>
-    </React.Fragment>
+    </div>
   )
 }
diff --git a/dev/src/app/components/buttons/page.tsx b/dev/src/app/components/buttons/page.tsx
index db49a21..69161eb 100644
--- a/dev/src/app/components/buttons/page.tsx
+++ b/dev/src/app/components/buttons/page.tsx
@@ -5,7 +5,7 @@ import { Section } from '@/pageComponents/Section'
 
 export default function buttons() {
   return (
-    <React.Fragment>
+    <div className='grid grid-cols-2 gap-12'>
       <Section header='Normal'>
         <Button>Activate</Button>
         <Button type='btn-secondary'>Disable</Button>
@@ -37,6 +37,6 @@ export default function buttons() {
           <BsCheckCircleFill className='w-4 h-4' />
         </Button>
       </Section>
-    </React.Fragment>
+    </div>
   )
 }
diff --git a/dev/src/app/components/buttons/regular/page.tsx b/dev/src/app/components/buttons/regular/page.tsx
index cb667dd..61b3e09 100644
--- a/dev/src/app/components/buttons/regular/page.tsx
+++ b/dev/src/app/components/buttons/regular/page.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 
 export default function page() {
   return (
-    <React.Fragment>
+    <div className='grid grid-cols-4 gap-12'>
       <Button>Default</Button>
       <Button type='btn-primary'>Primary</Button>
       <Button type='btn-secondary'>Secondary</Button>
@@ -17,6 +17,6 @@ export default function page() {
       <Button type='btn-info'>Info</Button>
       <Button type='btn-success'>Success</Button>
       <Button type='btn-link'>Link</Button>
-    </React.Fragment>
+    </div>
   )
 }
diff --git a/dev/src/app/components/buttons/with_icon/page.tsx b/dev/src/app/components/buttons/with_icon/page.tsx
index 18ffb30..6ba49f3 100644
--- a/dev/src/app/components/buttons/with_icon/page.tsx
+++ b/dev/src/app/components/buttons/with_icon/page.tsx
@@ -15,7 +15,7 @@ import {
 
 export default function page() {
   return (
-    <React.Fragment>
+    <div className='grid grid-cols-4 gap-12'>
       <Button>
         <BsCartFill className='w-4 h-4' /> Default
       </Button>
@@ -66,6 +66,6 @@ export default function page() {
         <BsLink className='w-4 h-4' />
         Link
       </Button>
-    </React.Fragment>
+    </div>
   )
 }
diff --git a/dev/src/app/components/colors/layout.tsx b/dev/src/app/components/colors/layout.tsx
new file mode 100644
index 0000000..6219582
--- /dev/null
+++ b/dev/src/app/components/colors/layout.tsx
@@ -0,0 +1,14 @@
+import { PageTitle } from '@/pageComponents/PageWrapper'
+import React from 'react'
+
+export default function RootLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <PageTitle title='Colors' description='Eyecandy'>
+      {children}
+    </PageTitle>
+  )
+}
diff --git a/dev/src/app/components/colors/page.tsx b/dev/src/app/components/colors/page.tsx
new file mode 100644
index 0000000..ab88b4c
--- /dev/null
+++ b/dev/src/app/components/colors/page.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import React from 'react'
+import { Section } from '@/pageComponents/Section'
+
+export default function colors() {
+  function ColorPalette({ className }: { className?: string | undefined }) {
+    return (
+      <button
+        onClick={() => {
+          if (className)
+            navigator.clipboard.writeText(className?.slice(3, className.length))
+        }}
+        className='flex flex-col gap-1 items-center justify-center'
+      >
+        <div className={`${className} w-24 h-24 rounded-lg`} />
+        <p className='text-xs font-medium'>
+          {className?.slice(3, className.length)}
+        </p>
+      </button>
+    )
+  }
+
+  return (
+    <div className='grid grid-cols-2 gap-12'>
+      <Section header='Base'>
+        <ColorPalette className='bg-base-100' />
+        <ColorPalette className='bg-base-200' />
+        <ColorPalette className='bg-base-300' />
+        <ColorPalette className='bg-base-content' />
+      </Section>
+
+      <Section header='Primary'>
+        <ColorPalette className='bg-primary' />
+        <ColorPalette className='bg-primary-focus' />
+        <ColorPalette className='bg-primary-content' />
+      </Section>
+
+      <Section header='Secondary'>
+        <ColorPalette className='bg-secondary' />
+        <ColorPalette className='bg-secondary-focus' />
+        <ColorPalette className='bg-secondary-content' />
+      </Section>
+
+      <Section header='Accent'>
+        <ColorPalette className='bg-accent' />
+        <ColorPalette className='bg-accent-focus' />
+        <ColorPalette className='bg-accent-content' />
+      </Section>
+
+      <Section header='Neutral'>
+        <ColorPalette className='bg-neutral' />
+        <ColorPalette className='bg-neutral-focus' />
+        <ColorPalette className='bg-neutral-content' />
+      </Section>
+
+      <Section header='Info'>
+        <ColorPalette className='bg-info' />
+        <ColorPalette className='bg-info-content' />
+      </Section>
+
+      <Section header='Success'>
+        <ColorPalette className='bg-success' />
+        <ColorPalette className='bg-success-content' />
+      </Section>
+
+      <Section header='Warning'>
+        <ColorPalette className='bg-warning' />
+        <ColorPalette className='bg-warning-content' />
+      </Section>
+
+      <Section header='Error'>
+        <ColorPalette className='bg-error' />
+        <ColorPalette className='bg-error-content' />
+      </Section>
+    </div>
+  )
+}
diff --git a/dev/src/app/components/inputs/page.tsx b/dev/src/app/components/inputs/page.tsx
index 1717c22..1317b38 100644
--- a/dev/src/app/components/inputs/page.tsx
+++ b/dev/src/app/components/inputs/page.tsx
@@ -5,7 +5,7 @@ import InputGroup from '@/components/InputGroup/InputGroup'
 
 export default function buttons() {
   return (
-    <React.Fragment>
+    <div className='grid grid-cols-2 gap-12'>
       <Section header='Checkbox'>
         <Checkbox checkboxAnimated />
         <Checkbox
@@ -76,6 +76,6 @@ export default function buttons() {
           </InputGroup>
         </div>
       </Section>
-    </React.Fragment>
+    </div>
   )
 }
diff --git a/dev/src/app/components/servercards/page.tsx b/dev/src/app/components/servercards/page.tsx
index 4d31aa5..1b32952 100644
--- a/dev/src/app/components/servercards/page.tsx
+++ b/dev/src/app/components/servercards/page.tsx
@@ -4,24 +4,26 @@ import React from 'react'
 export default function servercards() {
   return (
     <React.Fragment>
-      <div className='flex flex-col gap-2 items-center'>
-        <h1 className='text-lg font-semibold'>Card without any data</h1>
-        <ServerCard title='Title' description='Description' />
-      </div>
-      <div className='flex flex-col gap-2 items-center'>
-        <h1 className='text-lg font-semibold'>Sample card</h1>
-        <ServerCard
-          title='Gryt'
-          description='Welcome to our community! We are excited to have you here as a member of our growing community of privacy-conscious individuals.'
-          logoURL='/images/duck.jpeg'
-          bannerColor='#F8D385'
-          logoColor='#272935'
-        />
+      <div className='flex gap-12'>
+        <div className='flex flex-col gap-2 items-center'>
+          <h1 className='text-lg font-semibold'>Card without any data</h1>
+          <ServerCard title='Title' description='Description' />
+        </div>
+        <div className='flex flex-col gap-2 items-center'>
+          <h1 className='text-lg font-semibold'>Sample card</h1>
+          <ServerCard
+            title='Gryt'
+            description='Welcome to our community! We are excited to have you here as a member of our growing community of privacy-conscious individuals.'
+            logoURL='/images/duck.jpeg'
+            bannerColor='#F8D385'
+            logoColor='#272935'
+          />
+        </div>
       </div>
-      <div className='flex flex-col gap-2 items-center w-full'>
+      <div className='flex flex-col gap-2 w-full'>
         <h1 className='text-lg font-semibold'>Example cards:</h1>
         <div
-          className='grid gap-9 place-content-center w-full'
+          className='grid gap-12 w-full'
           style={{
             gridTemplateColumns: 'repeat(auto-fit, 280px)',
             gridAutoFlow: 'dense'
diff --git a/dev/src/app/page.tsx b/dev/src/app/page.tsx
index 4caeee0..d3d724c 100644
--- a/dev/src/app/page.tsx
+++ b/dev/src/app/page.tsx
@@ -4,12 +4,12 @@ import { Button } from '..'
 export default function Page() {
   return (
     <div className='w-screen h-screen flex flex-col gap-8 place-items-center justify-center'>
-      <div>
+      <div className='flex flex-col gap-2 items-center'>
         <h1 className='text-4xl text-primary font-bold'>Gryt UI</h1>
-        <p className='text-xl font-medium text-primary'>Welcome!</p>
+        <p className='font-medium text-primary'>Welcome!👋</p>
       </div>
       <Button isLink href='/components'>
-        Go to README
+        Continue
       </Button>
     </div>
   )
diff --git a/dev/src/navbar.json b/dev/src/navbar.json
index a98276d..1d8775c 100644
--- a/dev/src/navbar.json
+++ b/dev/src/navbar.json
@@ -3,6 +3,7 @@
   "badges": "/components/badges/",
   "icons_only": "/components/buttons/icons_only/",
   "buttons": "/components/buttons/",
+  "colors": "/components/colors/",
   "regular": "/components/buttons/regular/",
   "with_icon": "/components/buttons/with_icon/",
   "inputs": "/components/inputs/",
@@ -10,4 +11,4 @@
   "components": "/components/",
   "servercards": "/components/servercards/",
   "app": "/"
-}
\ No newline at end of file
+}
diff --git a/dev/src/navbar_names.json b/dev/src/navbar_names.json
index 0e83d58..a2e34ba 100644
--- a/dev/src/navbar_names.json
+++ b/dev/src/navbar_names.json
@@ -4,6 +4,7 @@
   "icons_only": "Icon only",
   "buttons": "Buttons",
   "regular": "Regular",
+  "colors": "Colors",
   "with_icon": "With icon",
   "inputs": "Inputs",
   "modals": "Modals",