updated styling in line with graphical guidelines

Teknologforeningen · Sep 14, 2023 · f06cd46 · f06cd46
1 parent f3725db
commit f06cd46
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 11 deletions.
diff --git a/components/Calendar.tsx b/components/Calendar.tsx
@@ -47,8 +47,8 @@ const CalendarComponent = () => {
 
   return (
     <div className="mx-5 flex flex-col py-10 md:py-0">
-      <Subtitle>Händelsekalendern</Subtitle>
-      <div className="mt-4 flex max-w-[400px] items-center self-center rounded-md bg-white p-5 pb-5 shadow-md">
+      <Subtitle underline={false}>Händelsekalendern</Subtitle>
+      <div className="mt-4 flex max-w-[400px] items-center self-center rounded-md border-[1px] border-teknologröd bg-white p-5 pb-5 shadow-md">
         <Calendar
           tileClassName={({ date }) => setClass(date)}
           minDetail="month"
@@ -93,7 +93,7 @@ const CalendarEventsList = ({
         return (
           <Link
             key={x.id}
-            className="highlight border-1 my-1.5 w-full max-w-[390px] rounded-md border-teknologröd bg-white p-2 shadow-md hover:bg-lightGray"
+            className="highlight border-1 my-1.5 w-full max-w-[390px] rounded-md border-teknologröd bg-white p-2 hover:bg-lightGray"
             href={x.htmlLink}
           >
             <p className="text-bold text-teknologröd">{x.title}</p>

diff --git a/components/Subtitle.tsx b/components/Subtitle.tsx
@@ -1,9 +1,14 @@
 import React from 'react'
 
-const Subtitle = ({ children }: React.PropsWithChildren) => (
+const Subtitle = ({
+  children,
+  underline = true,
+}: React.PropsWithChildren<{ underline?: boolean }>) => (
   <>
-    <p className="text-3xl text-white">{children}</p>
-    <div className="my-1 h-[3px] w-full rounded-sm bg-white" />{' '}
+    <p className="text-3xl text-black">{children}</p>
+    {underline && (
+      <div className="my-1 h-[3px] w-full rounded-sm bg-teknologröd" />
+    )}
   </>
 )
 

diff --git a/components/posts/Post.tsx b/components/posts/Post.tsx
@@ -6,7 +6,7 @@ import { getDateLong } from '@utils/helpers'
 const Post = ({ post }: { post: PostType }) => {
   return (
     <div
-      className="mt-4 w-full rounded-md border-[1px] border-white bg-white p-2 shadow-md"
+      className="mt-4 w-full rounded-md bg-lightGray p-2"
       key={post.slug}
     >
       <p className="select-none text-xl font-medium">{post.title}</p>

diff --git a/components/posts/index.tsx b/components/posts/index.tsx
@@ -13,7 +13,7 @@ const Posts = ({ posts }: { posts: PostType[] }) => {
       ))}
       <Link
         href={`/nyheter`}
-        className="mt-4 rounded-md border-[1px] border-white p-2 text-center text-sm leading-[18px] tracking-wide text-white hover:text-[15px] hover:font-semibold"
+        className="mt-4 rounded-md border-[1px] border-teknologröd p-2 text-center text-sm leading-[18px] tracking-wide text-teknologröd hover:text-[15px] hover:font-semibold"
       >
         Mera nyheter
       </Link>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -45,7 +45,7 @@ const Home: NextPage<HomeProps> = ({
       <Column>
         <MainBanner bannerImages={bannerImages} />
         <Item
-          backgroundColor="darkgray"
+          backgroundColor="white"
           className="max-w-[1500px] flex-col md:flex-row"
         >
           <Posts posts={posts.slice(0, 5)} />
@@ -69,7 +69,7 @@ const Home: NextPage<HomeProps> = ({
             />
           </div>
         </Row> */}
-        <Item backgroundColor="white">
+        <Item backgroundColor="lightgray">
           <TFInfo />
         </Item>
       </Column>

diff --git a/styles/globals.css b/styles/globals.css
@@ -17,7 +17,7 @@
 @layer base {
   html,
   body {
-    background-color: var(--lightGray);
+    background-color: white;
     height: 100vh;
     display: flex;
     flex-direction: column;