ben.carrasco/chrome-extension-dialer
1
0
Fork 0
mirror of https://github.com/jambonz/chrome-extension-dialer.git synced 2025-12-19 04:47:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

adjusted css to align with figma and implemented one form to show at a time for either add or edit

Browse Source
This commit is contained in:
abdurahman
2024-08-27 23:01:50 +01:00
parent 0efa0cc584
commit a36b497444
9 changed files with 70 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/animate/index.tsx
View File

@@ -18,6 +18,7 @@ function AnimateOnShow({
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: exit }}
transition={{ duration: duration }}
className="test"
>
{children}
</motion.div>

8
src/imgs/icons/Switch.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
<path d="M10.5994 6.59375C10.3405 6.59375 10.1306 6.38388 10.1306 6.125L10.1306 1.75C10.1306 1.49112 10.3405 1.28125 10.5994 1.28125C10.8583 1.28125 11.0681 1.49112 11.0681 1.75L11.0681 6.125C11.0681 6.38388 10.8583 6.59375 10.5994 6.59375Z" fill="#BB225B"/>
<path d="M4.375 8.3125C3.33947 8.3125 2.5 7.47303 2.5 6.4375C2.5 5.40197 3.33947 4.5625 4.375 4.5625C5.41053 4.5625 6.25 5.40197 6.25 6.4375C6.25 7.47303 5.41053 8.3125 4.375 8.3125Z" fill="#BB225B"/>
<path d="M10.625 7.6875C9.58947 7.6875 8.75 8.52697 8.75 9.5625C8.75 10.598 9.58947 11.4375 10.625 11.4375C11.6605 11.4375 12.5 10.598 12.5 9.5625C12.5 8.52697 11.6605 7.6875 10.625 7.6875Z" fill="#BB225B"/>
<path d="M3.88063 9.875C3.88063 9.61612 4.0905 9.40625 4.34938 9.40625C4.60826 9.40625 4.81813 9.61612 4.81813 9.875V14.25C4.81813 14.5089 4.60826 14.7188 4.34938 14.7188C4.0905 14.7188 3.88063 14.5089 3.88063 14.25V9.875Z" fill="#BB225B"/>
<path d="M10.5994 14.7188C10.3405 14.7188 10.1306 14.5089 10.1306 14.25V13C10.1306 12.7411 10.3405 12.5312 10.5994 12.5312C10.8583 12.5312 11.0681 12.7411 11.0681 13V14.25C11.0681 14.5089 10.8583 14.7188 10.5994 14.7188Z" fill="#BB225B"/>
<path d="M3.88063 1.75C3.88063 1.49112 4.0905 1.28125 4.34938 1.28125C4.60826 1.28125 4.81813 1.49112 4.81813 1.75V3C4.81813 3.25888 4.60826 3.46875 4.34938 3.46875C4.0905 3.46875 3.88063 3.25888 3.88063 3V1.75Z" fill="#BB225B"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

4
src/imgs/icons/Trash.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M3 6.38597C3 5.90152 3.34538 5.50879 3.77143 5.50879L6.43567 5.50832C6.96502 5.49306 7.43202 5.11033 7.61214 4.54412C7.61688 4.52923 7.62232 4.51087 7.64185 4.44424L7.75665 4.05256C7.8269 3.81241 7.8881 3.60318 7.97375 3.41617C8.31209 2.67736 8.93808 2.16432 9.66147 2.03297C9.84457 1.99972 10.0385 1.99986 10.2611 2.00002H13.7391C13.9617 1.99986 14.1556 1.99972 14.3387 2.03297C15.0621 2.16432 15.6881 2.67736 16.0264 3.41617C16.1121 3.60318 16.1733 3.81241 16.2435 4.05256L16.3583 4.44424C16.3778 4.51087 16.3833 4.52923 16.388 4.54412C16.5682 5.11033 17.1278 5.49353 17.6571 5.50879H20.2286C20.6546 5.50879 21 5.90152 21 6.38597C21 6.87043 20.6546 7.26316 20.2286 7.26316H3.77143C3.34538 7.26316 3 6.87043 3 6.38597Z" fill="#BB225B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5956 22.0001H12.4044C15.1871 22.0001 16.5785 22.0001 17.4831 21.1142C18.3878 20.2283 18.4803 18.7751 18.6654 15.8686L18.9321 11.6807C19.0326 10.1037 19.0828 9.31524 18.6289 8.81558C18.1751 8.31592 17.4087 8.31592 15.876 8.31592H8.12404C6.59127 8.31592 5.82488 8.31592 5.37105 8.81558C4.91722 9.31524 4.96744 10.1037 5.06788 11.6807L5.33459 15.8686C5.5197 18.7751 5.61225 20.2283 6.51689 21.1142C7.42153 22.0001 8.81289 22.0001 11.5956 22.0001ZM10.2463 12.1886C10.2051 11.7548 9.83753 11.4382 9.42537 11.4816C9.01321 11.525 8.71251 11.9119 8.75372 12.3457L9.25372 17.6089C9.29494 18.0427 9.66247 18.3593 10.0746 18.3159C10.4868 18.2725 10.7875 17.8856 10.7463 17.4518L10.2463 12.1886ZM14.5746 11.4816C14.9868 11.525 15.2875 11.9119 15.2463 12.3457L14.7463 17.6089C14.7051 18.0427 14.3375 18.3593 13.9254 18.3159C13.5132 18.2725 13.2125 17.8856 13.2537 17.4518L13.7537 12.1886C13.7949 11.7548 14.1625 11.4382 14.5746 11.4816Z" fill="#BB225B"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

4
src/theme.tsx
View File

@@ -9,7 +9,8 @@ const mainTheme = extendTheme({
200: "#fc839d",
300: "#fa5575",
400: "#f8274e",
500: "#DA1C5C",
500: "#BB225B",
550: "#DA1C5C",
600: "#c60921",
700: "#99081a",
800: "#6c0714",
@@ -17,6 +18,7 @@ const mainTheme = extendTheme({
},
grey: {
50: "#FFFFFF",
75: "#F9F9F9",
100: "#F5F5F5",
200: "#ECECEC",
300: "#E3E3E3",

4
src/window/footer/footer.tsx
View File

@@ -157,10 +157,10 @@ function Footer({
return (
<HStack
paddingX={6}
mb={2}
padding={"15px"}
justifyContent={"space-between"}
alignItems={"center"}
bg={"grey.75"}
>
{isConfigured ? (
<HStack alignItems={"center"} flexWrap={"nowrap"} className="xs">

10
src/window/settings/accordionList.tsx
View File

@@ -13,9 +13,13 @@ import SettingItem from "src/window/settings/settingItem";
export function AccordionList({
allSettings,
reload,
onOpenForm,
isNewFormOpen,
}: {
allSettings: IAppSettings[];
reload: () => void;
onOpenForm: () => void;
isNewFormOpen: boolean;
}) {
const { isOpen, onToggle } = useDisclosure();
const [openAcc, setOpenAcc] = useState(0);
@@ -26,6 +30,8 @@ export function AccordionList({
};
function handleToggleAcc(accIndex: number) {
if (isNewFormOpen) return; //prevents opening form if for for new account is open
onOpenForm();
setOpenAcc(accIndex);
onToggle();
}
@@ -34,6 +40,8 @@ export function AccordionList({
{allSettings.map((data, index) => (
<AccordionItem borderColor={"white"} key={index}>
<AccordionButton
padding={0}
marginBottom={-1}
_hover={{
backgroundColor: "#fff",
cursor: "default",
@@ -44,7 +52,7 @@ export function AccordionList({
data={data}
/>
</AccordionButton>
<AccordionPanel pb={4}>
<AccordionPanel pb={4} px={0}>
<AccountForm
formData={data}
handleClose={closeFormInAccordion}

27
src/window/settings/accountForm.tsx
View File

@@ -5,6 +5,7 @@ import {
FormControl,
FormLabel,
HStack,
Image,
Input,
Text,
useToast,
@@ -27,6 +28,8 @@ import {
import { normalizeUrl } from "src/utils";
import { getApplications } from "src/api";
import { colors } from "src/theme";
import Switch from "src/imgs/icons/Switch.svg";
import Trash from "src/imgs/icons/Trash.svg";
function AccountForm({
closeForm,
@@ -146,8 +149,18 @@ function AccountForm({
};
return (
<form onSubmit={handleSubmit}>
<VStack spacing={2} w="full" p={0}>
<form onSubmit={handleSubmit} className="formStyle">
<VStack
spacing={2}
w="full"
p={0}
border={"1px"}
borderColor={"gray.200"}
borderRadius={"6px"}
paddingY={"15px"}
paddingRight={"15px"}
paddingLeft={"10px"}
>
<VStack spacing={2} w="full" p={0}>
<FormControl id={`sip_display_name${inputUniqueId}`}>
<FormLabel>SIP Display Name (Optional)</FormLabel>
@@ -239,7 +252,7 @@ function AccountForm({
{" "}
{showAdvanced ? "Hide" : "Show"} Advanced Settings
</Text>
<FontAwesomeIcon color={colors.jambonz} icon={faSliders} />
<Image width={"15px"} height={"15px"} src={Switch} />
</Button>
</Center>
</VStack>
@@ -270,6 +283,7 @@ function AccountForm({
<Button
textColor={"jambonz.500"}
fontWeight={"semibold"}
borderRadius={"11px"}
bg="jambonz.0"
type="submit"
w="full"
@@ -293,10 +307,11 @@ function AccountForm({
}}
>
{formData && (
<FontAwesomeIcon
<Image
width={"24px"}
height={"24px"}
src={Trash}
onClick={() => handleDeleteSetting(formData.id)}
icon={faTrashCan}
color={colors.jambonz}
/>
)}
</HStack>

25
src/window/settings/index.tsx
View File

@@ -10,6 +10,7 @@ const MAX_NUM_OF_ACCOUNTS = 5;
export const Settings = () => {
const [showForm, setShowForm] = useState(false);
const [showFormInAccordion, setShowFormInAccordion] = useState(false);
const [allSettings, setAllSettings] = useState<IAppSettings[]>([]);
useEffect(
@@ -30,18 +31,30 @@ export const Settings = () => {
setAllSettings(getSettings());
};
const btnIsDisabled = allSettings.length >= MAX_NUM_OF_ACCOUNTS;
return (
<div>
<Box>
<AccordionList allSettings={allSettings} reload={loadSettings} />
<AccordionList
onOpenForm={() => setShowFormInAccordion((prev) => !prev)}
allSettings={allSettings}
reload={loadSettings}
isNewFormOpen={showForm}
/>
</Box>
{!showForm && (
{!showForm && !showFormInAccordion && (
<Button
marginY={"2.5"}
marginY={"3"}
colorScheme="jambonz"
// bg={btnIsDisabled ? "jambonz.0" : "jambonz.500"}
// textColor={btnIsDisabled ? "jambonz.550" : "white"}
w="full"
onClick={handleOpenForm}
isDisabled={allSettings.length >= MAX_NUM_OF_ACCOUNTS}
isDisabled={btnIsDisabled}
// _hover={{
// bg={btnIsDisabled ? "jambonz.0" : "jambonz.500"}
// }}
>
Add Account
</Button>
@@ -57,9 +70,7 @@ export const Settings = () => {
<Text>
{allSettings.length} of {MAX_NUM_OF_ACCOUNTS}{" "}
</Text>
{allSettings.length >= MAX_NUM_OF_ACCOUNTS && (
<Text>Limit has been reached</Text>
)}
{btnIsDisabled && <Text>Limit has been reached</Text>}
</Center>
{/* <Tabs isFitted colorScheme={DEFAULT_COLOR_SCHEME}>

6
src/window/settings/settingItem.tsx
View File

@@ -17,8 +17,10 @@ function SettingItem({
border={"1px"}
borderColor={"gray.200"}
justifyContent={"start"}
borderRadius={"2xl"}
padding={"2.5"}
borderRadius={"6px"}
paddingTop={"7px"}
paddingBottom={"5px"}
paddingX={"10px"}
onClick={onToggleAcc}
_hover={{
backgroundColor: "gray.200",