changing theme

frontend/pages/index.tsx

@@ -22,7 +22,9 @@ const Home = () => {
       {training ? (
         <>
           <h1 className='training-title'>{training.title}</h1>
-          <TrainingMeta training={training} />
+          <div className='training-meta-wrap'>
+            <TrainingMeta training={training} />
+          </div>
           <TrainingProgram training={training} />
         </>
       ) : null}
@@ -31,6 +33,10 @@ const Home = () => {
 
       <style jsx>
         {`
+          .next-training {
+            padding: 1.2em 0.3em;
+          }
+
           .training-title {
             grid-area: title;
             margin: 0.3em 0;
@@ -38,8 +44,7 @@ const Home = () => {
             font-size: 3.4rem;
             font-weight: 300;
             text-transform: uppercase;
-            color: ${theme.colors.blue};
-            padding: 0;
+            color: ${theme.colors.offWhite};
             margin: 0.3em 0;
             position: relative;
           }
@@ -51,7 +56,7 @@ const Home = () => {
             display: block;
             position: absolute;
             top: -1rem;
-            left: 01rem;
+            left: 1rem;
             color: ${theme.colors.darkerblue};
           }
 
@@ -77,6 +82,7 @@ const Home = () => {
           }
           @media (min-width: 1024px) {
             .next-training {
+              padding: 3em 3em;
               display: grid;
               grid-template-columns: 2fr 1fr;
               grid-template-rows: auto 1fr auto;
@@ -85,28 +91,51 @@ const Home = () => {
                 'info     program'
                 'archive  program';
               column-gap: 2em;
+              background-image: linear-gradient(
+                to bottom,
+                #84cae7,
+                #84cae7 400px,
+                #c7c7c7 400px,
+                #c7c7c7 401px,
+                #ebebeb 401px
+              );
             }
             .training-title {
-              font-size: 8rem;
+              font-size: 5rem;
               margin: 0;
             }
             .training-title::before {
               font-size: 1.4rem;
               display: block;
               position: absolute;
-              top: -0.4rem;
-              left: 2.4rem;
+              top: -0.7rem;
+              left: 0.4rem;
               color: ${theme.colors.darkerblue};
             }
-            :global(.training-meta) {
+            .training-meta-wrap {
+              filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.18));
+            }
+            .next-training :global(.training-meta) {
               grid-area: info;
-              height: 350px;
+              width: 700px;
+              margin-left: auto;
+              padding: 2em;
+              padding-top: 11.5em;
+              color: ${theme.colors.offWhite};
+              height: 300px;
+              background-color: #efefef;
               background-image: url('/media/man_working_out.jpg');
               background-size: auto 100%;
               background-repeat: no-repeat;
               background-position: right center;
               clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%, 0% 0%);
             }
+            .next-training :global(.training-program) {
+              padding: 2em;
+              background-color: #ebebeb;
+              /* box-shadow: ${theme.bs}; */
+              filter: drop-shadow(0 0 12px rgba(0,0,0,0.18));
+            }
           }
         `}
       </style>

frontend/src/app/components/Logo.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import theme from '../../styles/theme'
 
 const Logo = () => (
   <h1 className='logo'>
@@ -23,7 +24,7 @@ const Logo = () => (
           text-align: right;
           width: 1.55em;
           height: 1.55em;
-          background-color: red;
+          background-color: ${theme.colors.logoRed};
           border-radius: 50%;
           font-weight: 900;
           padding-right: 0.2em;
@@ -46,7 +47,7 @@ const Logo = () => (
         }
 
         .logo .logo-text {
-          color: black;
+          color: ${theme.colors.logoBlack};
           margin-left: 0em;
         }
       `}

frontend/src/styles/global.ts

@@ -3,7 +3,6 @@ import css from 'styled-jsx/css'
 
 const GlobalStyle = css.global`
   /* normalize.css is imported in meta.js */
-
   @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,900&display=swap');
 
   /* Use border-box sizing instead of context-box.
@@ -54,7 +53,6 @@ const GlobalStyle = css.global`
   }
   main {
     grid-area: main;
-    padding: 1em 0.3em;
   }
 
   footer {
@@ -77,18 +75,6 @@ const GlobalStyle = css.global`
     font-family: 'Roboto Mono', monospace;
   }
 
-  @media (min-width: 480px) {
-    main {
-      padding: 2em 1em;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    main {
-      padding: 2em 3em;
-    }
-  }
-
   form label {
     display: none;
   }

frontend/src/styles/theme.ts

@@ -1,7 +1,8 @@
 const theme = {
   colors: {
     lightred: '#f0b0b0',
-    red: '#f03535',
+    logoRed: '#eb0000',
+    logoBlack: '#1a1a1a',
     black: '#393939',
     darkgrey: '#5d6a6b',
     grey: '#7f8c8d',
@@ -12,12 +13,12 @@ const theme = {
     darkblue: '#285680',
     darkerblue: '#204567',
     offWhite: '#EDEDED',
-    nav: '#393939e7'
+    nav: '#393939e7',
   },
   maxWidth: '1000px',
   bs: '0 8px 12px 0 rgba(0,0,0,0.09)',
   bsUp: '0 -8px 12px 0 rgba(0,0,0,0.18)',
-  bsSmall: '0 5px 10px 0 rgba(0,0,0,0.19)'
+  bsSmall: '0 5px 10px 0 rgba(0,0,0,0.19)',
 }
 
 export default theme

frontend/src/training/components/TrainingMeta.tsx

@@ -1,24 +1,15 @@
 import { TTraining } from '../types'
 import { calculateRating, formatTime, calculateDuration } from '../utils'
-import { useContext } from 'react'
-import { UserContext } from '../../user/hooks'
-import { useRegisterMutation, useDeregisterMutation } from '../../gql'
 import RegistrationButton from './RegistrationButton'
 
 const TrainingMeta = ({ training }: { training: TTraining }) => {
-  const { user } = useContext(UserContext)
-  const [register, registerData] = useRegisterMutation({
-    variables: { training: training.id },
-  })
-  const [deregister, deregisterData] = useDeregisterMutation({
-    variables: { training: training.id },
-  })
-
   return (
     <aside className='training-meta'>
       <div className='info'>
         <span className='caption'>Type</span>
-        <span className='data'>{training.type.name}</span>
+        <span className='data' title={training.type.description}>
+          {training.type.name}
+        </span>
       </div>
       <div className='info'>
         <span className='caption'>Date</span>