Merge pull request 'v0.1/styling-and-bug-fixes' (#38) from v0.1/styling-and-bug-fixes into main

Reviewed-on: #38

package-lock.json

@@ -16,6 +16,7 @@
         "next-intl": "^3.11.3",
         "react": "^18",
         "react-dom": "^18",
+        "react-image": "^4.1.0",
         "video.js": "^8.10.0",
         "videojs-hls-quality-selector": "^2.0.0"
       },
@@ -4043,6 +4044,16 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-image": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-image/-/react-image-4.1.0.tgz",
+      "integrity": "sha512-qwPNlelQe9Zy14K2pGWSwoL+vHsAwmJKS6gkotekDgRpcnRuzXNap00GfibD3eEPYu3WCPlyIUUNzcyHOrLHjw==",
+      "peerDependencies": {
+        "@babel/runtime": ">=7",
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -17,6 +17,7 @@
     "next-intl": "^3.11.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-image": "^4.1.0",
     "video.js": "^8.10.0",
     "videojs-hls-quality-selector": "^2.0.0"
   },

src/components/Layout/Header/Description/Description.module.scss

@@ -0,0 +1,7 @@
+@import 'fontsize';
+@import 'spacing';
+
+.container {
+    font-size: $font-size-small;
+    margin: $spacing_8 0px $spacing_16;
+}

src/components/Layout/Header/Description/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import style from './Description.module.scss'
+
 import {useTranslations} from 'next-intl';
 
 const Description: React.FC = () => {
@@ -7,7 +9,7 @@ const Description: React.FC = () => {
   const t = useTranslations('Header');
 
   return (
-    <div>{t('description')}</div>
+    <div className={style.container}>{t('description')}</div>
   );
 };
 

src/components/Layout/Header/Disclaimer/Disclaimer.module.scss

@@ -1,10 +1,11 @@
-@import 'colors';
 @import 'spacing';
+@import 'fontsize';
 
 .messageBox {
-    border: 1px solid $colors_yellow;
+    border: 1px solid var(--primary);
     text-align: center;
     padding: $spacing_8;
     border-radius: $spacing_4;
-    margin-bottom: $spacing_32;
+    margin-bottom: $spacing_16;
+    font-size: $font-size-medium;
 }

src/components/Layout/Header/Title/Title.module.scss

@@ -0,0 +1,5 @@
+@import 'spacing';
+
+.title {
+    margin-bottom: 0px;
+}

src/components/Layout/Header/Title/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import style from './Title.module.scss'
+
 import {useTranslations} from 'next-intl';
 import Link from 'next/link';
 
@@ -8,8 +10,7 @@ const Title: React.FC = () => {
   const t = useTranslations('Header');
 
   return (
-    <Link href={'/'}><h1>{t('title')}</h1></Link>
-    
+    <Link href={'/'}><h1 className={style.title}>{t('title')}</h1></Link>
   );
 };
 

src/components/Layout/Player/VideoJS/VideoJS.module.scss

@@ -0,0 +1,9 @@
+.container {
+    li {
+        color: white !important
+    }
+
+    li:not(.vjs-selected) span {
+        color: var(--primary) !important;
+    }
+}

src/components/Layout/Player/VideoJS/index.tsx

@@ -6,6 +6,8 @@ import videojs from 'video.js';
 
 import 'video.js/dist/video-js.css';
 
+import style from './VideoJS.module.scss'
+
 export const VideoJS = (props: { options: any; onReady: any; }) => {
   const videoRef = React.useRef(null);
   const playerRef = React.useRef(null);
@@ -56,7 +58,7 @@ export const VideoJS = (props: { options: any; onReady: any; }) => {
   }, [playerRef]);
 
   return (
-    <div data-vjs-player>
+    <div className={style.container} data-vjs-player>
       <div ref={videoRef} />
     </div>
   );

src/components/Layout/Results/Wrapper/Gallery/Gallery.module.scss

@@ -25,7 +25,7 @@
 }
 
 .galleryContainer.show {
-    @media only screen and (max-width: $portrait) {
+    @media only screen and (max-width: $tablet) {
         grid-template-columns: repeat(1, 1fr);
     }
 }

src/components/Layout/Results/Wrapper/Gallery/Thumbnail/Thumbnail.module.scss

@@ -1,10 +1,9 @@
 @import 'spacing';
-@import 'colors';
 @import 'breakpoints';
 
 .text {
     font-size: 12px;
-    color: $colors_yellow;
+    color: var(--primary);
     text-decoration: none;
 
     display: none;
@@ -14,9 +13,21 @@
     }
 }
 
-.image {
+.image, .imgPlaceholder {
     border-radius: $spacing_4;
     width: 100%;
+
+    @media only screen and (max-width: $tablet) {
+        height: $spacing_64 + $spacing_8;
+    }
+
+    @media only screen and (min-width: $tablet) {
+        height: $spacing_64 * 3;
+    }
+}
+
+.imgPlaceholder {
+    background-color: var(--primary-focus);
 }
 
 .thumbnailContainer {
@@ -46,5 +57,11 @@
             width: auto;
         }
     }
+
+    .image, .imgPlaceholder {
+        @media only screen and (min-width: $small) {
+            height: $spacing_64 * 3;
+        }
+    }
     
 }

src/components/Layout/Results/Wrapper/Gallery/Thumbnail/index.tsx

@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import { Img } from 'react-image'
+
 import classNames from 'classnames';
 
 import Link from 'next/link'
@@ -25,7 +27,7 @@ const Thumbnail: React.FC<Props> = (props) => {
     return (
         <div className={classNames(style.thumbnailContainer, { [style.show]: show } )}>
             <Link href={`/${locale}/video/${encodedUri}`}>
-                <img className={style.image} src={imgUrl} />
+                <Img className={style.image} src={imgUrl} unloader={<div className={style.imgPlaceholder}></div>} />
                 <div className={style.text}>{text}</div>
             </Link>
         </div>

src/components/Layout/Results/Wrapper/Toggle/Toggle.module.scss

@@ -1,6 +1,16 @@
 @import 'breakpoints';
 
 .toggleContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 16px;
+
+    input[type="checkbox"]:checked {
+        background-color: var(--primary);
+        border-color: var(--primary-focus);
+    }
+
     @media only screen and (min-width: $tablet) {
         display: none;
     }

src/components/Layout/SearchBar/SearchBarForm/SearchBarForm.module.scss

@@ -1,5 +1,4 @@
 @import 'spacing';
-@import 'colors';
 
 .searchForm { 
     display: flex;
@@ -12,19 +11,27 @@
     margin-right: $spacing_16;
 }
 
+.query:hover {
+    border-color: var(--primary-hover);
+}
+
+.query:focus {
+    border-color: var(--primary-hover);
+}
+
 .submitBtn{
     flex: 1;
-    background-color: $colors_yellow;
-    border-color: $colors_yellow;
-    color: $colors_yellow_inverse;
+    background-color: var(--primary);
+    border-color: var(--primary);
+    color: var(--primary-inverse);
 }
 
 .submitBtn:hover {
-    background-color: $colors_yellow_hover;
-    border-color: $colors_yellow_hover;
+    background-color: var(--primary-hover);
+    border-color: var(--primary-hover);
 }
 
 .submitBtn:focus {
-    background-color: $colors_yellow_focus;
-    border-color: $colors_yellow_focus;
+    background-color: var(--primary-focus);
+    border-color: var(--primary-focus);
 }

src/styles/_breakpoints.scss

@@ -1,3 +1,4 @@
+$small: 20em;
 $portrait: 40em;
 $tablet: 48em;
 $laptop: 64em;

src/styles/_colors.scss

@@ -1,5 +0,0 @@
-// primaries
-$colors_yellow: #fdd835;
-$colors_yellow_hover: #fbc02d;
-$colors_yellow_focus: rgba(253, 216, 53, 0.125);
-$colors_yellow_inverse: rgba(0, 0, 0, 0.75);

src/styles/_font.scss

@@ -0,0 +1,33 @@
+@import "./breakpoints";
+@import "./fontsize";
+
+@font-face {
+    font-family: 'Lemon Yellow Sun';
+    src: url("/font/LemonYellowSun.otf") format("opentype");
+}
+
+a {
+    text-decoration: none !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-family: 'Lemon Yellow Sun' !important;
+}
+
+h1 {
+    font-size: $font-size-xlarge;
+
+    @media only screen and (max-width: $tablet) {
+        font-size: $font-size-large;
+    }
+}
+
+span,
+p,
+div {
+    font-family: 'Roboto,Arial' sans-serif !important;
+}

src/styles/_fontsize.scss

@@ -0,0 +1,4 @@
+$font-size-small: 10px;
+$font-size-medium: 16px;
+$font-size-large: 32px;
+$font-size-xlarge: 48px;

src/styles/_spacing.scss

@@ -1,4 +1,6 @@
 $spacing_4: 4px;
 $spacing_8: 8px;
 $spacing_16: 16px;
-$spacing_32: 32px;
+$spacing_32: 32px;
+$spacing_48: 48px;
+$spacing_64: 64px;

src/styles/_theme.scss

@@ -0,0 +1,37 @@
+/* light scheme (Default) */
+/* Can be forced with data-theme="light" */
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+    --primary: #d81b60;
+    --primary-hover: #e91e63;
+    --primary-focus: rgba(216, 27, 96, 0.25);
+    --primary-inverse: #FFF;
+}
+
+/* Pink Dark scheme (Auto) */
+/* Automatically enabled if user has Dark mode enabled */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --primary: #fdd835;
+    --primary-hover: #fbc02d;
+    --primary-focus: rgba(253, 216, 53, 0.125);
+    --primary-inverse: rgba(0, 0, 0, 0.75);
+  }
+}
+
+/* Pink Dark scheme (Forced) */
+/* Enabled if forced with data-theme="dark" */
+[data-theme="dark"] {
+    --primary: #fdd835;
+    --primary-hover: #fbc02d;
+    --primary-focus: rgba(253, 216, 53, 0.125);
+    --primary-inverse: rgba(0, 0, 0, 0.75);
+}
+
+/* Pink (Common styles) */
+:root {
+  --form-element-active-border-color: var(--primary);
+  --form-element-focus-color: var(--primary-focus);
+  --switch-color: var(--primary-inverse);
+  --switch-checked-background-color: var(--primary);
+}

src/styles/globals.scss

@@ -1 +1,4 @@
-@use "@picocss/pico";
+@use "@picocss/pico";
+
+@import "./font";
+@import "./theme";