✨ Create responsive question menu (#145)

Co-authored-by: Rohan Gupta <rohan.gupta@gameskraft.com>
Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com>
Co-authored-by: Restyled.io <commits@restyled.io>

src/components/AlgoExpertLogo/index.tsx

@@ -11,14 +11,10 @@ import { CONTENT_VARIANTS } from '../../constants';
 const AlgoExpertLogo: React.FC<Props> = () => {
   return (
     <ProjectPage>
-      <QuestionDetails
-        title='AlgoExpert Logo'
-        titleClassName={classes.questionTitle}
-        containerClassName={classes.questionDetailsContainer}
-      >
+      <QuestionDetails title='AlgoExpert Logo' titleClassName={classes.questionTitle} containerClassName={classes.questionDetailsContainer}>
         <p>
-          You're given an HTML file containing the markup for the AlgoExpert logo. Using only CSS, replicate the
-          expected output following these specifications:
+          You're given an HTML file containing the markup for the AlgoExpert logo. Using only CSS, replicate the expected output following these
+          specifications:
         </p>
         <ul>
           <li>
@@ -30,29 +26,28 @@ const AlgoExpertLogo: React.FC<Props> = () => {
             <ul>
               <li>
                 In the center is the inner circle. This is a circle with a width and height of 10px and a solid, white
-                <ColourBlock colour={COLORS.WHITE} />, 5px border. The left edge of the inner circle is 50px from the
-                left edge of the <span className={classes.questionDescriptionHighlight}>.wrapper</span>.
+                <ColourBlock colour={COLORS.WHITE} />, 5px border. The left edge of the inner circle is 50px from the left edge of the{' '}
+                <span className={classes.questionDescriptionHighlight}>.wrapper</span>.
               </li>
               <li>
-                The first ring has a width of 100px, a height of 30px, and a border-radius of 50%. It also has a solid,
-                white
-                <ColourBlock colour={COLORS.WHITE} />, 5px border. This ring is rotated so that the left edge is at the
-                top left, and the right edge is at the bottom right.
+                The first ring has a width of 100px, a height of 30px, and a border-radius of 50%. It also has a solid, white
+                <ColourBlock colour={COLORS.WHITE} />, 5px border. This ring is rotated so that the left edge is at the top left, and the right edge
+                is at the bottom right.
               </li>
               <li>
-                The second ring is the same as the first ring, but it is rotated in the opposite direction (that is the
-                left edge is at the bottom left and the right edge is at the top right).
+                The second ring is the same as the first ring, but it is rotated in the opposite direction (that is the left edge is at the bottom
+                left and the right edge is at the top right).
               </li>
             </ul>
           </li>
           <li>
             To the right of the logo is the AlgoExpert text. This text is white
-            <ColourBlock colour={COLORS.WHITE} />, with a font-size of 48px and the system default monospace
-            font-family. This text is 50px from the right edge of the logo's inner circle.
+            <ColourBlock colour={COLORS.WHITE} />, with a font-size of 48px and the system default monospace font-family. This text is 50px from the
+            right edge of the logo's inner circle.
           </li>
           <li>
-            Both the logo and the text are vertically centered in the{' '}
-            <span className={classes.questionDescriptionHighlight}>.wrapper</span> container.
+            Both the logo and the text are vertically centered in the <span className={classes.questionDescriptionHighlight}>.wrapper</span>{' '}
+            container.
           </li>
         </ul>
       </QuestionDetails>

src/components/ConnectFour/styles.module.scss

@@ -19,7 +19,7 @@
 }
 
 .solutionContainer {
-  @include spacing($margin: 1rem 1rem 6rem);
+  @include spacing($margin: 1rem);
   max-width: 50rem;
 }
 

src/screens/Error/index.tsx → src/components/Error/index.tsx

@@ -1,25 +1,27 @@
 import React from 'react';
 import { Link, useRouteError } from 'react-router-dom';
+import { motion } from 'framer-motion';
 import classes from './styles.module.scss';
-import QuestionsMenu from '../../components/ProjectPage/components/QuestionsMenu';
-import ProjectNavbar from '../../components/ProjectNavbar';
+import QuestionsMenu from '../ProjectPage/components/QuestionsMenu';
+import ProjectNavbar from '../ProjectNavbar';
+import { CONTENT_VARIANTS } from '../../constants';
 
 const Error: React.FC<Props> = () => {
   const error: any = useRouteError();
 
   return (
-    <div className='container'>
+    <motion.div initial='hidden' animate='visible' className='container'>
       <QuestionsMenu />
-      <div className={classes.error}>
+      <motion.div variants={CONTENT_VARIANTS} className={classes.error}>
         <h1 className={classes.title}>Oops!</h1>
         <p className={classes.subtitle}>Sorry, an unexpected error has occurred.</p>
         <p className={classes.description}>{error.statusText || error.message}</p>
         <Link to='/' className={classes.redirection}>
           Go to Home
         </Link>
-      </div>
+      </motion.div>
       <ProjectNavbar />
-    </div>
+    </motion.div>
   );
 };
 

src/screens/Error/styles.module.scss → src/components/Error/styles.module.scss

@@ -5,9 +5,9 @@
   @include theme(background-color, accent3);
   display: flex;
   flex-direction: column;
+  height: 100vh;
 
   @media screen and (min-width: 1200px) {
-    height: 100vh;
     width: 100vw;
     overflow: hidden;
     flex-direction: row;
@@ -20,6 +20,7 @@
   flex-direction: column;
   justify-content: center;
   gap: 0.5rem;
+  height: 100%;
 
   @media screen and (min-width: 1200px) {
     @include spacing(4rem 6rem);

src/components/Icons/Clipboard.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import { COLORS } from '../../constants/theme';
+import { ICON_PATH_VARIANTS } from '../../constants';
 
 const ClipBoard: React.FC<IconProps> = (props) => {
   const { color = COLORS.WHITE, height = 24, width = 24 } = props;
 
   return (
-    <svg
+    <motion.svg
+      initial='hidden'
+      animate='visible'
       xmlns='http://www.w3.org/2000/svg'
       width={width}
       height={height}
@@ -17,9 +21,9 @@ const ClipBoard: React.FC<IconProps> = (props) => {
       strokeLinejoin='round'
     >
       <path stroke='none' d='M0 0h24v24H0z' fill='none' />
-      <path d='M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2' />
+      <motion.path variants={ICON_PATH_VARIANTS} d='M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2' />
       <rect x='9' y='3' width='6' height='4' rx='2' />
-    </svg>
+    </motion.svg>
   );
 };
 

src/components/Icons/ClipboardChecked.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import { COLORS } from '../../constants/theme';
+import { ICON_PATH_VARIANTS } from '../../constants';
 
 const ClipBoardChecked: React.FC<IconProps> = (props) => {
   const { color = COLORS.WHITE, height = 24, width = 24 } = props;
 
   return (
-    <svg
+    <motion.svg
+      initial='hidden'
+      animate='visible'
       xmlns='http://www.w3.org/2000/svg'
       width={width}
       height={height}
@@ -17,10 +21,10 @@ const ClipBoardChecked: React.FC<IconProps> = (props) => {
       strokeLinejoin='round'
     >
       <path stroke='none' d='M0 0h24v24H0z' fill='none' />
-      <path d='M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2' />
+      <motion.path variants={ICON_PATH_VARIANTS} d='M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2' />
       <rect x='9' y='3' width='6' height='4' rx='2' />
-      <path d='M9 14l2 2l4 -4' />
-    </svg>
+      <motion.path variants={ICON_PATH_VARIANTS} d='M9 14l2 2l4 -4' />
+    </motion.svg>
   );
 };
 

src/components/Icons/Close.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import { COLORS } from '../../constants/theme';
+import { ICON_PATH_VARIANTS } from '../../constants';
 
 const Close: React.FC<IconProps> = (props) => {
   const { color = COLORS.WHITE, height = 24, width = 24 } = props;
 
   return (
-    <svg
+    <motion.svg
+      initial='hidden'
+      animate='visible'
       xmlns='http://www.w3.org/2000/svg'
       width={width}
       height={height}
@@ -17,9 +21,9 @@ const Close: React.FC<IconProps> = (props) => {
       strokeLinejoin='round'
     >
       <path stroke='none' d='M0 0h24v24H0z' fill='none' />
-      <path d='M18 6l-12 12' />
-      <path d='M6 6l12 12' />
-    </svg>
+      <motion.path variants={ICON_PATH_VARIANTS} d='M18 6l-12 12' />
+      <motion.path variants={ICON_PATH_VARIANTS} d='M6 6l12 12' />
+    </motion.svg>
   );
 };
 

src/components/Icons/Dark.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import { COLORS } from '../../constants/theme';
+import { ICON_PATH_VARIANTS } from '../../constants';
 
 const Dark: React.FC<IconProps> = (props) => {
   const { color = COLORS.WHITE, height = 24, width = 24 } = props;
 
   return (
-    <svg
+    <motion.svg
+      initial='hidden'
+      animate='visible'
       xmlns='http://www.w3.org/2000/svg'
       width={width}
       height={height}
@@ -17,10 +21,10 @@ const Dark: React.FC<IconProps> = (props) => {
       strokeLinejoin='round'
     >
       <path stroke='none' d='M0 0h24v24H0z' fill='none' />
-      <path d='M3 3l18 18' />
-      <path d='M16 12a4 4 0 0 0 -4 -4m-2.834 1.177a4 4 0 0 0 5.66 5.654' />
-      <path d='M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7' />
-    </svg>
+      <motion.path variants={ICON_PATH_VARIANTS} d='M3 3l18 18' />
+      <motion.path variants={ICON_PATH_VARIANTS} d='M16 12a4 4 0 0 0 -4 -4m-2.834 1.177a4 4 0 0 0 5.66 5.654' />
+      <motion.path variants={ICON_PATH_VARIANTS} d='M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7' />
+    </motion.svg>
   );
 };
 

src/components/Icons/GitHub.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import { COLORS } from '../../constants/theme';
+import { ICON_PATH_VARIANTS } from '../../constants';
 
 const GitHub: React.FC<IconProps> = (props) => {
   const { color = COLORS.WHITE, height = 24, width = 24 } = props;
 
   return (
-    <svg
+    <motion.svg
+      initial='hidden'
+      animate='visible'
       xmlns='http://www.w3.org/2000/svg'
       width={width}
       height={height}
@@ -17,8 +21,11 @@ const GitHub: React.FC<IconProps> = (props) => {
       strokeLinejoin='round'
     >
       <path stroke='none' d='M0 0h24v24H0z' fill='none' />
-      <path d='M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5' />
-    </svg>
+      <motion.path
+        variants={ICON_PATH_VARIANTS}
+        d='M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5'
+      />
+    </motion.svg>
   );
 };
 

src/components/Icons/Home.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import { COLORS } from '../../constants/theme';
+import { ICON_PATH_VARIANTS } from '../../constants';
 
 const Home: React.FC<IconProps> = (props) => {
   const { color = COLORS.WHITE, height = 24, width = 24 } = props;
 
   return (
-    <svg
+    <motion.svg
+      initial='hidden'
+      animate='visible'
       xmlns='http://www.w3.org/2000/svg'
       width={width}
       height={height}
@@ -17,11 +21,11 @@ const Home: React.FC<IconProps> = (props) => {
       strokeLinejoin='round'
     >
       <path stroke='none' d='M0 0h24v24H0z' fill='none' />
-      <path d='M9 21v-6a2 2 0 0 1 2 -2h2c.641 0 1.212 .302 1.578 .771' />
-      <path d='M20.136 11.136l-8.136 -8.136l-9 9h2v7a2 2 0 0 0 2 2h6.344' />
-      <path d='M19 22v-6' />
-      <path d='M22 19l-3 -3l-3 3' />
-    </svg>
+      <motion.path variants={ICON_PATH_VARIANTS} d='M9 21v-6a2 2 0 0 1 2 -2h2c.641 0 1.212 .302 1.578 .771' />
+      <motion.path variants={ICON_PATH_VARIANTS} d='M20.136 11.136l-8.136 -8.136l-9 9h2v7a2 2 0 0 0 2 2h6.344' />
+      <motion.path variants={ICON_PATH_VARIANTS} d='M19 22v-6' />
+      <motion.path variants={ICON_PATH_VARIANTS} d='M22 19l-3 -3l-3 3' />
+    </motion.svg>
   );
 };
 

src/components/Icons/Light.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import { COLORS } from '../../constants/theme';
+import { ICON_PATH_VARIANTS } from '../../constants';
 
 const Light: React.FC<IconProps> = (props) => {
   const { color = COLORS.WHITE, height = 24, width = 24 } = props;
 
   return (
-    <svg
+    <motion.svg
+      initial='hidden'
+      animate='visible'
       xmlns='http://www.w3.org/2000/svg'
       width={width}
       height={height}
@@ -17,9 +21,9 @@ const Light: React.FC<IconProps> = (props) => {
       strokeLinejoin='round'
     >
       <path stroke='none' d='M0 0h24v24H0z' fill='none' />
-      <path d='M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0' />
-      <path d='M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7' />
-    </svg>
+      <motion.path variants={ICON_PATH_VARIANTS} d='M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0' />
+      <motion.path variants={ICON_PATH_VARIANTS} d='M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7' />
+    </motion.svg>
   );
 };
 

src/components/Icons/Menu.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { COLORS } from '../../constants/theme';
+import { ICON_PATH_VARIANTS } from '../../constants';
+
+const Menu: React.FC<IconProps> = (props) => {
+  const { color = COLORS.WHITE, height = 24, width = 24 } = props;
+
+  return (
+    <motion.svg
+      initial='hidden'
+      animate='visible'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width}
+      height={height}
+      viewBox='0 0 24 24'
+      strokeWidth='2.5'
+      stroke={color}
+      fill='none'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    >
+      <path stroke='none' d='M0 0h24v24H0z' fill='none' />
+      <motion.path variants={ICON_PATH_VARIANTS} d='M4 6l16 0' />
+      <motion.path variants={ICON_PATH_VARIANTS} d='M4 12l16 0' />
+      <motion.path variants={ICON_PATH_VARIANTS} d='M4 18l16 0' />
+    </motion.svg>
+  );
+};
+
+export default Menu;

src/components/Icons/Reset.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import { COLORS } from '../../constants/theme';
+import { ICON_PATH_VARIANTS } from '../../constants';
 
 const Reset: React.FC<IconProps> = (props) => {
   const { color = COLORS.WHITE, height = 24, width = 24 } = props;
 
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill={color} height={height} width={width}>
-      <path
+    <motion.svg initial='hidden' animate='visible' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill={color} height={height} width={width}>
+      <motion.path
+        variants={ICON_PATH_VARIANTS}
         fillRule='evenodd'
         d='M4.755 10.059a7.5 7.5 0 0112.548-3.364l1.903 1.903h-3.183a.75.75 0 100 1.5h4.992a.75.75 0 00.75-.75V4.356a.75.75 0 00-1.5 0v3.18l-1.9-1.9A9 9 0 003.306 9.67a.75.75 0 101.45.388zm15.408 3.352a.75.75 0 00-.919.53 7.5 7.5 0 01-12.548 3.364l-1.902-1.903h3.183a.75.75 0 000-1.5H2.984a.75.75 0 00-.75.75v4.992a.75.75 0 001.5 0v-3.18l1.9 1.9a9 9 0 0015.059-4.035.75.75 0 00-.53-.918z'
         clipRule='evenodd'
       />
-    </svg>
+    </motion.svg>
   );
 };