Added option to customize border color in the UI. (#332)

shravan20 · Dec 3, 2024 · e7e9728 · e7e9728
1 parent 55f86a4
commit e7e9728
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 5 deletions.
diff --git a/frontend/src/components/Pages/Home/index.js b/frontend/src/components/Pages/Home/index.js
@@ -1,10 +1,19 @@
 import React, { useState } from 'react';
-import { Typography, Grid } from '@material-ui/core';
+import { Typography, Grid, Tooltip } from '@material-ui/core';
 import TemplateCard from '../../organisms/TemplateCard';
 import { themes, animations, layouts, fonts, colorValues, quoteTypes } from '../../../config/cardTemplate';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import ContributorsCard from '../../ContributorsCard/ContributorCard'
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+    customTooltip: {
+      fontSize: '16px',
+      fontWeight: 'bold'
+    },
+  });
+
 const Home = () => {
 
     const [theme, setTheme] = useState(themes[0]);
@@ -13,8 +22,11 @@ const Home = () => {
     const [font, setFont] = useState(fonts[0]);
     const [fontColor, setFontColor] = useState(null);
     const [bgColor, setBgColor] = useState(null);
+    const [borderColor, setBorderColor] = useState(null);
     const [quoteType, setQuoteType] = useState("random");
 
+    const classes = useStyles();
+
     return (
         <React.Fragment>
 
@@ -112,6 +124,26 @@ const Home = () => {
                     />
                 </Grid>
 
+                <Grid item xs={12} sm={6} lg={3}>
+                    <Tooltip 
+                        title="This option only works with the default layout." 
+                        placement="top" 
+                        arrow 
+                        classes={{ tooltip: classes.customTooltip }}
+                    >
+                        <Autocomplete
+                            id="border-color"
+                            options={colorValues}
+                            value={borderColor}
+                            style={{ width: 300 }}
+                            onChange={(_event, newValue) => {
+                                setBorderColor(newValue)
+                            }}
+                            renderInput={(params) => <TextField {...params} label="Border color" placeholder="Select a color" variant="outlined" />}
+                        />
+                    </Tooltip>
+                </Grid>
+
                 <Grid item xs={12} sm={6} lg={3}>
                     <Autocomplete
                         id="quote-type"
@@ -130,7 +162,7 @@ const Home = () => {
 
             <Grid container spacing={4}>
                 <Grid item xs={12} style={{ marginTop: '20px' }}>
-                    <TemplateCard theme={theme} animation={animation} layout={layout} font={font} fontColor={fontColor} bgColor={bgColor} quoteType={quoteType} />
+                    <TemplateCard theme={theme} animation={animation} layout={layout} font={font} fontColor={fontColor} bgColor={bgColor} borderColor={borderColor} quoteType={quoteType} />
                 </Grid>
                 <Grid item xs={12}>
                     <Typography align="center">Other layouts</Typography>
@@ -139,7 +171,7 @@ const Home = () => {
                     layouts.filter((item) => item !== layout).map((restLayout) => {
                         return (
                             <Grid key={restLayout} item xs={12} sm={12} md={6}>
-                                <TemplateCard theme={theme} animation={animation} layout={restLayout} font={font} fontColor={fontColor} bgColor={bgColor} quoteType={quoteType} />
+                                <TemplateCard theme={theme} animation={animation} layout={restLayout} font={font} fontColor={fontColor} bgColor={bgColor} borderColor={borderColor} quoteType={quoteType} />
                             </Grid>
                         )
                     })

diff --git a/frontend/src/components/organisms/TemplateCard/index.js b/frontend/src/components/organisms/TemplateCard/index.js
@@ -36,10 +36,14 @@ const TemplateCard = (props) => {
     theme.bg_color = props.bgColor;
   }
 
+  const isLayoutDefault = props.layout === 'default';
+  const borderColor = isLayoutDefault && props.borderColor ? props.borderColor : 'rgba(0, 0, 0, 0.2)';
+
   template.setTheme(theme);
   template.setData(data);
   template.setFont(mainFonts[props.font]);
   template.setAnimation(mainAnimations[props.animation]);
+  template.setBorderColor(borderColor);
   template.setLayout(mainLayouts[props.layout]);
   const file = new Blob([getTemplate(template)], { type: "image/svg+xml" });
   const url = URL.createObjectURL(file);
@@ -72,7 +76,8 @@ const TemplateCard = (props) => {
     font: props.font,
     quoteType: props.quoteType,
     ...(props.bgColor && { bgColor: props.bgColor }),
-    ...(props.fontColor && { fontColor: props.fontColor })
+    ...(props.fontColor && { fontColor: props.fontColor }),
+    ...(isLayoutDefault && props.borderColor && { borderColor }),
   });
   const quoteUrl = `${originUrl}/quote?${params.toString()}`;
 

diff --git a/frontend/src/util/layouts/index.js b/frontend/src/util/layouts/index.js
@@ -11,7 +11,7 @@ const layouts = {
                   padding: 40px 20px;
                   min-width: 600px;
                   background-color: ${template.theme.bg_color};
-                  border: 1px solid rgba(0, 0, 0, 0.2);
+                  border: 1px solid ${template.borderColor};
                   border-radius: 5px;
                   ${template.animation.animation};
                   }

diff --git a/frontend/src/util/template/Template.js b/frontend/src/util/template/Template.js
@@ -21,6 +21,11 @@ class Template {
     this.setStructure(layout.structure);
     this.calculateHeight(this.quote.length);
   }
+
+  setBorderColor(borderColor) {
+    this.borderColor = borderColor;
+  }
+
   setStyle(style) {
     this.css = style(this);
   }