changes made during video

Author: piotrwitek

src/containers/css-modules-container/container-styles.tsx

@@ -13,9 +13,9 @@ interface ContainerStyles {
   /** elevate element using box-shadow */
   effect__elevate: string;
   /** hide element on mobile screen  */
-  effect__hideOnMobile: string;
+  effect__hideOnTablet: string;
   /** show element on mobile screen  */
-  effect__showOnMobile: string;
+  effect__showOnTablet: string;
 }
 
 export const containerStyles: ContainerStyles = csjs`
@@ -36,30 +36,30 @@ export const containerStyles: ContainerStyles = csjs`
 
   .effect__elevate {
     box-shadow: none;
-    transition: box-shadow 0.5s linear;
+    transition: box-shadow 0.6s ease-out;
   }
   .effect__elevate:hover {
     box-shadow: 0 6px 20px 0 ${colors.shadowColor};
   }
 
-  .effect__hideOnMobile {
+  .effect__hideOnTablet {
     margin: 0px 30px;
     opacity: 1;
     transition:
       margin 1s 0.5s,
       opacity 1s 0.5s;
   }
 
-  .effect__showOnMobile {
+  .effect__showOnTablet {
     margin: 0px 50px;
     opacity: 0;
     transition:
       margin 1s,
       opacity 1s;
   }
 
-  @media (max-width: 450px) {
-    .effect__hideOnMobile {
+  @media (max-width: 740px) {
+    .effect__hideOnTablet {
       margin: 0px 50px;
       opacity: 0;
       transition:
@@ -68,7 +68,7 @@ export const containerStyles: ContainerStyles = csjs`
       box-shadow 0.5s linear;
     }
 
-    .effect__showOnMobile {
+    .effect__showOnTablet {
       margin: 0px 30px;
       opacity: 1;
       transition:

src/containers/css-modules-container/index.tsx

@@ -27,7 +27,7 @@ export function CssModulesContainer() {
       </ul>
       <br />
       <PageSection className={containerStyles.textCentered}>
-        <div className={containerStyles.effect__hideOnMobile}>
+        <div className={containerStyles.effect__hideOnTablet}>
           <div className={[containerStyles.darkBg, containerStyles.effect__elevate].join(' ')}>
             <p className={containerStyles.glowingText}>
               <br />
@@ -37,7 +37,7 @@ export function CssModulesContainer() {
             </p>
           </div>
         </div>
-        <div className={containerStyles.effect__showOnMobile}>
+        <div className={containerStyles.effect__showOnTablet}>
           <div className={[containerStyles.darkBg, containerStyles.effect__elevate].join(' ')}>
             <p className={containerStyles.glowingText}>
               SUPRISE!!!

src/themes/colors.tsx

@@ -1,5 +1,5 @@
 const DARK_THEME = 'darkTheme';
-const selectedTheme = null;
+const selectedTheme = DARK_THEME;
 
 export default {
   get textColor() {
@@ -9,7 +9,7 @@ export default {
     }
   },
   borderColor: '#222',
-  backgroundColor: '#444',
+  backgroundColor: 'gold',
   shadowColor: '#000',
   shadowColorLight: '#888'
 };