manual button roundness, fix and move username input, fix: provide stage to SVG

frontend/frontend/src/components/Card/Card.js

@@ -5,18 +5,24 @@ import SVG from './SVG';
 import { classnames } from '../../utils';
 import { HOST } from '../../constants';
 
-export const Image = ({ imageSrc, compact, extraClasses = '' }) => {
+export const Image = ({ imageSrc, stage, compact, extraClasses = '' }) => {
   const fullImageSrc = `https://${HOST}/api${imageSrc}&client=wizard`;
 
   return (
     <div className={`${extraClasses} relative w-full relative`}>
-      <SVG className="object-cover" url={fullImageSrc} compact={compact} />
+      <SVG
+        className="object-cover"
+        url={fullImageSrc}
+        compact={compact}
+        stage={stage}
+      />
     </div>
   );
 };
 
 Image.propTypes = {
   imageSrc: PropTypes.string.isRequired,
+  stage: PropTypes.number.isRequired,
   compact: PropTypes.bool,
   extraClasses: PropTypes.string,
 };
@@ -30,6 +36,7 @@ export const Card = ({
   title,
   description,
   imageSrc,
+  stage,
   selected,
   compact,
   fixedSize,
@@ -50,6 +57,7 @@ export const Card = ({
         imageSrc={imageSrc}
         compact={compact}
         extraClasses={fixedSize ? 'flex justify-center' : ''}
+        stage={stage}
       />
     </div>
   );
@@ -59,6 +67,7 @@ Card.propTypes = {
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
   imageSrc: PropTypes.string.isRequired,
+  stage: PropTypes.number.isRequired,
   selected: PropTypes.bool,
   compact: PropTypes.bool,
   fixedSize: PropTypes.string,

frontend/frontend/src/components/Generic/Button.js

@@ -11,7 +11,7 @@ const Button = (props) => {
       {...props}
       className={classnames(
         props.className,
-        'border-0 py-2 px-6 inline-flex focus:outline-none rounded-md text-lg',
+        'border-0 py-2 px-6 inline-flex focus:outline-none rounded-[0.25rem] text-lg',
       )}
     >
       {props.children}

frontend/frontend/src/pages/Home/stages/Customize.js

@@ -61,45 +61,6 @@ const CustomizeStage = ({
   return (
     <div className="w-full flex flex-wrap">
       <div className="h-auto lg:w-2/5 md:w-1/2 pr-10 p-10 rounded-sm bg-gray-200">
-        {cardType === CardTypes.STATS && (
-          <CheckboxSection
-            title="Show All Stats?"
-            text="Show all available statistics."
-            question="Show all stats?"
-            variable={showAllStats}
-            setVariable={setShowAllStats}
-          />
-        )}
-        {cardType === CardTypes.STATS && (
-          <StatsRankSection
-            selectedOption={selectedStatsRank}
-            setSelectedOption={setSelectedStatsRank}
-          />
-        )}
-        {cardType === CardTypes.STATS && (
-          <CheckboxSection
-            title="Show Icons?"
-            text="Show icons next to all stats."
-            question="Show icons?"
-            variable={showIcons}
-            setVariable={setShowIcons}
-          />
-        )}
-        {cardType === CardTypes.STATS && (
-          <CheckboxSection
-            title="Include All Commits?"
-            text="Count total commits or just commits of the last 365 days."
-            question="Include all commits?"
-            variable={includeAllCommits}
-            setVariable={setIncludeAllCommits}
-          />
-        )}
-        {cardType === CardTypes.TOP_LANGS && (
-          <LanguagesLayoutSection
-            selectedOption={selectedLanguagesLayout}
-            setSelectedOption={setSelectedLanguagesLayout}
-          />
-        )}
         {(cardType === CardTypes.STATS || cardType === CardTypes.TOP_LANGS) && (
           <TextSection
             title="Username"
@@ -139,7 +100,7 @@ const CustomizeStage = ({
               if (parts.length > 1) {
                 newValue = parts.slice(-1).join('/');
               }
-              setRepo(newValue);
+              setSelectedUserId(newValue);
             }}
             disabled={!isAuthenticated}
           />
@@ -253,6 +214,45 @@ const CustomizeStage = ({
             setValue={setWakatimeUser}
           />
         )}
+        {cardType === CardTypes.STATS && (
+          <CheckboxSection
+            title="Show All Stats?"
+            text="Show all available statistics."
+            question="Show all stats?"
+            variable={showAllStats}
+            setVariable={setShowAllStats}
+          />
+        )}
+        {cardType === CardTypes.STATS && (
+          <StatsRankSection
+            selectedOption={selectedStatsRank}
+            setSelectedOption={setSelectedStatsRank}
+          />
+        )}
+        {cardType === CardTypes.STATS && (
+          <CheckboxSection
+            title="Show Icons?"
+            text="Show icons next to all stats."
+            question="Show icons?"
+            variable={showIcons}
+            setVariable={setShowIcons}
+          />
+        )}
+        {cardType === CardTypes.STATS && (
+          <CheckboxSection
+            title="Include All Commits?"
+            text="Count total commits or just commits of the last 365 days."
+            question="Include all commits?"
+            variable={includeAllCommits}
+            setVariable={setIncludeAllCommits}
+          />
+        )}
+        {cardType === CardTypes.TOP_LANGS && (
+          <LanguagesLayoutSection
+            selectedOption={selectedLanguagesLayout}
+            setSelectedOption={setSelectedLanguagesLayout}
+          />
+        )}
         {cardType === CardTypes.WAKATIME && (
           <WakatimeLayoutSection
             selectedOption={selectedWakatimeLayout}
@@ -338,7 +338,7 @@ const CustomizeStage = ({
       </div>
       <div className="w-full lg:w-3/5 md:w-1/2 object-center pt-5 md:pt-0 pl-0 md:pl-5 lg:pl-0">
         <div className="w-full lg:w-3/5 mx-auto flex flex-col justify-center sticky top-32">
-          <Image imageSrc={fullSuffix} />
+          <Image imageSrc={fullSuffix} stage={2} />
         </div>
       </div>
     </div>

frontend/frontend/src/pages/Home/stages/Display.js

@@ -88,7 +88,10 @@ const DisplayStage = ({ filename, link, themeSuffix }) => {
       </div>
       <div className="w-full lg:w-3/5 md:w-1/2 object-center pt-5 md:pt-0 pl-0 md:pl-5 lg:pl-0">
         <div className="w-full lg:w-3/5 mx-auto flex flex-col justify-center sticky top-32">
-          <Image imageSrc={`${themeSuffix}&disable_animations=true`} />
+          <Image
+            imageSrc={`${themeSuffix}&disable_animations=true`}
+            stage={4}
+          />
         </div>
       </div>
     </div>

frontend/frontend/src/pages/Home/stages/Login.js

@@ -252,6 +252,7 @@ const LoginStage = ({ setCurrItem }) => {
                     imageSrc={card.demoImageSrc}
                     compact={false}
                     extraClasses=""
+                    stage={0}
                   />
                 </div>
               );

frontend/frontend/src/pages/Home/stages/SelectCard.js

@@ -65,6 +65,7 @@ const SelectCardStage = ({ selectedCard, setSelectedCard, setStage }) => {
             imageSrc={card.demoImageSrc}
             selected={selectedCard === card.cardType}
             fixedSize="true"
+            stage={1}
           />
         </button>
       ))}

frontend/frontend/src/pages/Home/stages/Theme.js

@@ -36,6 +36,7 @@ const ThemeStage = ({ theme, setTheme, setStage, fullSuffix }) => {
               description=""
               imageSrc={`${fullSuffix}&theme=${myTheme}`}
               selected={theme === myTheme}
+              stage={3}
             />
           </button>
         ))}