-
Notifications
You must be signed in to change notification settings - Fork 144
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat/add wallet amount in dollar #921
Changes from 4 commits
7901cb8
0f45e05
9b198c0
92e370c
0188284
60943f8
9edcf8e
7cf953f
16c9922
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,31 @@ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import React, { useState } from 'react'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import EyeIcon from "@components/UI/iconsComponents/icons/eyeIcon"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import EyeOffIcon from '@components/UI/iconsComponents/icons/EyeOffIcon'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
interface ShowHideAddressProps { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use a type not an interface |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
address: string; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
className?: string; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
iconSize?: string; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
wallet:boolean; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
hideBalance: boolean; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
setHideBalance: React.Dispatch<React.SetStateAction<boolean>>; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const ShowHideAddress: React.FC<ShowHideAddressProps> = ({ address, className, iconSize = "24",wallet=false, hideBalance, setHideBalance }) => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const toggleBalance = (e: React.MouseEvent<HTMLButtonElement>) => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
e.stopPropagation(); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
setHideBalance(!hideBalance); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
return ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<button className={className} onClick={toggleBalance}> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
{!hideBalance ? ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<EyeIcon width={iconSize} color={wallet ? undefined : "#F4FAFF"} /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
) : ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<EyeOffIcon width={iconSize} color={wallet ? undefined : "#F4FAFF"}/> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
)} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</button> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Improve component implementation with accessibility and proper typing.
Apply these improvements: - const ShowHideAddress: React.FC<ShowHideAddressProps> = ({ address, className, iconSize = "24",wallet=false, hideBalance, setHideBalance }) => {
+ const ShowHideAddress: React.FC<ShowHideAddressProps> = ({
+ className,
+ iconSize = "24",
+ wallet = false,
+ hideBalance,
+ setHideBalance
+ }) => {
const toggleBalance = (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
setHideBalance(!hideBalance);
};
return (
- <button className={className} onClick={toggleBalance}>
+ <button
+ className={className}
+ onClick={toggleBalance}
+ aria-label={hideBalance ? "Show balance" : "Hide balance"}
+ type="button"
+ >
{!hideBalance ? (
<EyeIcon width={iconSize} color={wallet ? undefined : "#F4FAFF"} />
) : (
<EyeOffIcon width={iconSize} color={wallet ? undefined : "#F4FAFF"}/>
)}
</button>
);
}; Also, consider removing the unused 📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
export default ShowHideAddress; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 💡 Codebase verification Component integration needs improvement The verification revealed several issues with the wallet amount feature integration:
Recommendations:
🔗 Analysis chainVerify integration with wallet amount feature. Since this component is part of the wallet amount in dollar feature:
Let's check the integration: 🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# Check for wallet amount related components and their usage
echo "Checking for related wallet components..."
rg -l "ShowHideAddress" --type tsx
echo "Checking for wallet amount display logic..."
rg -l "wallet.*amount.*dollar" --type tsx
Length of output: 324 Script: #!/bin/bash
# Let's try without file type restriction since tsx extension isn't recognized
echo "Checking for related wallet components..."
rg -l "ShowHideAddress"
echo -e "\nChecking component usage and integration..."
rg "ShowHideAddress.*hideBalance" -A 5 -B 5
echo -e "\nChecking for wallet amount related logic..."
rg -l "wallet.*amount|balance.*hide|hideBalance"
Length of output: 1419 Script: #!/bin/bash
# Let's check how the component is used in profileCard
echo "Checking ShowHideAddress usage in profileCard..."
rg "ShowHideAddress" -A 10 -B 10 "components/UI/profileCard/profileCard.tsx"
# Let's also check for any state management related to hideBalance
echo -e "\nChecking hideBalance state management..."
rg "hideBalance|setHideBalance" -A 5 -B 5 "components/UI/profileCard/profileCard.tsx"
Length of output: 3360 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import React, { FunctionComponent } from "react"; | ||
|
||
const EyeIcon: FunctionComponent<IconProps> = ({ width, color }) => { | ||
Marchand-Nicolas marked this conversation as resolved.
Show resolved
Hide resolved
|
||
return ( | ||
<svg | ||
width={width} | ||
height={width} | ||
cursor="pointer" | ||
Marchand-Nicolas marked this conversation as resolved.
Show resolved
Hide resolved
|
||
viewBox="0 0 24 24" | ||
fill="none" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<path | ||
d="M12 5C7 5 2.73 8.11 1 12.5C2.73 16.89 7 20 12 20C17 20 21.27 16.89 23 12.5C21.27 8.11 17 5 12 5Z" | ||
fill={color} | ||
/> | ||
<path | ||
d="M12 16.5C14.21 16.5 16 14.71 16 12.5C16 10.29 14.21 8.5 12 8.5C9.79 8.5 8 10.29 8 12.5C8 14.71 9.79 16.5 12 16.5Z" | ||
fill={color} | ||
/> | ||
<path | ||
d="M12 10.5C13.38 10.5 14.5 11.62 14.5 13C14.5 14.38 13.38 15.5 12 15.5C10.62 15.5 9.5 14.38 9.5 13C9.5 11.62 10.62 10.5 12 10.5Z" | ||
fill="black" | ||
/> | ||
</svg> | ||
Marchand-Nicolas marked this conversation as resolved.
Show resolved
Hide resolved
|
||
); | ||
}; | ||
|
||
export default EyeIcon; |
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,45 @@ | ||||||||||||||||||||||||||||||||
import React, { FunctionComponent } from "react"; | ||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||
const EyeOffIcon: FunctionComponent<IconProps> = ({ width, color }) => { | ||||||||||||||||||||||||||||||||
Marchand-Nicolas marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||||||||||||||||||||||||||
return ( | ||||||||||||||||||||||||||||||||
<svg | ||||||||||||||||||||||||||||||||
width={width} | ||||||||||||||||||||||||||||||||
height={width} | ||||||||||||||||||||||||||||||||
cursor="pointer" | ||||||||||||||||||||||||||||||||
viewBox="0 0 24 24" | ||||||||||||||||||||||||||||||||
fill="none" | ||||||||||||||||||||||||||||||||
xmlns="http://www.w3.org/2000/svg" | ||||||||||||||||||||||||||||||||
> | ||||||||||||||||||||||||||||||||
Comment on lines
+5
to
+12
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Consider removing hardcoded cursor style. The cursor style should be controlled by the parent component for better reusability. The icon might not always be clickable in every context. <svg
width={width}
height={width}
- cursor="pointer"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
> 📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||||||||||||
<path | ||||||||||||||||||||||||||||||||
d="M14.12 14.12C13.8 14.46 13.39 14.75 12.92 14.92C12.55 15.08 12.15 15.15 11.75 15.11C11.35 15.08 10.96 14.95 10.61 14.72C10.26 14.5 9.96 14.18 9.73 13.8C9.5 13.4 9.37 12.96 9.34 12.5C9.32 12.1 9.39 11.7 9.55 11.33C9.71 10.96 9.95 10.62 10.27 10.34" | ||||||||||||||||||||||||||||||||
stroke={color} | ||||||||||||||||||||||||||||||||
strokeWidth="1.5" | ||||||||||||||||||||||||||||||||
strokeLinecap="round" | ||||||||||||||||||||||||||||||||
strokeLinejoin="round" | ||||||||||||||||||||||||||||||||
/> | ||||||||||||||||||||||||||||||||
<path | ||||||||||||||||||||||||||||||||
d="M17.94 17.94C16.26 19.36 14.13 20 12 20C7 20 2.73 16.89 1 12.5C2.06 9.93 3.92 7.86 6.29 6.51" | ||||||||||||||||||||||||||||||||
stroke={color} | ||||||||||||||||||||||||||||||||
strokeWidth="1.5" | ||||||||||||||||||||||||||||||||
strokeLinecap="round" | ||||||||||||||||||||||||||||||||
strokeLinejoin="round" | ||||||||||||||||||||||||||||||||
/> | ||||||||||||||||||||||||||||||||
<path | ||||||||||||||||||||||||||||||||
d="M9.9 5.06C10.67 4.9 11.45 4.84 12.24 4.89C16.24 5.11 20.27 8.24 22 12.5C21.33 14.03 20.38 15.41 19.21 16.53" | ||||||||||||||||||||||||||||||||
stroke={color} | ||||||||||||||||||||||||||||||||
strokeWidth="1.5" | ||||||||||||||||||||||||||||||||
strokeLinecap="round" | ||||||||||||||||||||||||||||||||
strokeLinejoin="round" | ||||||||||||||||||||||||||||||||
/> | ||||||||||||||||||||||||||||||||
<path | ||||||||||||||||||||||||||||||||
d="M3 3L21 21" | ||||||||||||||||||||||||||||||||
fill="black" | ||||||||||||||||||||||||||||||||
strokeWidth="1.5" | ||||||||||||||||||||||||||||||||
strokeLinecap="round" | ||||||||||||||||||||||||||||||||
strokeLinejoin="round" | ||||||||||||||||||||||||||||||||
/> | ||||||||||||||||||||||||||||||||
Comment on lines
+34
to
+40
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Remove hardcoded fill color from path. The last path has a hardcoded <path
d="M3 3L21 21"
- fill="black"
+ stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
|
||||||||||||||||||||||||||||||||
</svg> | ||||||||||||||||||||||||||||||||
); | ||||||||||||||||||||||||||||||||
}; | ||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||
export default EyeOffIcon; |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -1,8 +1,8 @@ | ||||||
import React, { | ||||||
add walletimport React, { | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fix syntax error in import statement. There's an invalid text "add wallet" before the import statement that needs to be removed. -add walletimport React, {
+import React, { 📝 Committable suggestion
Suggested change
🧰 Tools🪛 Biome[error] 1-1: Expected a semicolon or an implicit semicolon after a statement, but found none An explicit or implicit semicolon is expected here... ...Which is required to end this statement (parse) [error] 1-1: Expected a semicolon or an implicit semicolon after a statement, but found none An explicit or implicit semicolon is expected here... ...Which is required to end this statement (parse) |
||||||
FunctionComponent, | ||||||
useCallback, | ||||||
useEffect, | ||||||
useMemo, | ||||||
useMemo, | ||||||
useState, | ||||||
} from "react"; | ||||||
import styles from "@styles/dashboard.module.css"; | ||||||
|
@@ -25,6 +25,7 @@ import { hexToDecimal } from "@utils/feltService"; | |||||
import { Url } from "next/dist/shared/lib/router/router"; | ||||||
import { TEXT_TYPE } from "@constants/typography"; | ||||||
import Typography from "../typography/typography"; | ||||||
import ShowHideAddress from "../ShowHideAddress"; | ||||||
|
||||||
const ProfileCard: FunctionComponent<ProfileCard> = ({ | ||||||
rankingData, | ||||||
|
@@ -37,7 +38,7 @@ const ProfileCard: FunctionComponent<ProfileCard> = ({ | |||||
const sinceDate = useCreationDate(identity); | ||||||
const { data: profileData } = useStarkProfile({ address: identity.owner }); | ||||||
const [userXp, setUserXp] = useState<number>(); | ||||||
|
||||||
const [hideBalance, setHideBalance] = useState(true); | ||||||
|
||||||
const rankFormatter = useCallback((rank: number) => { | ||||||
if (rank > 10000) return "+10k"; | ||||||
|
@@ -90,17 +91,23 @@ const ProfileCard: FunctionComponent<ProfileCard> = ({ | |||||
{sinceDate ? `${sinceDate}` : ""} | ||||||
</Typography> | ||||||
<Typography type={TEXT_TYPE.H2} className={`${styles.profile_name} mt-2`}>{identity.domain.domain}</Typography> | ||||||
|
||||||
{/* {toggle currency} */} | ||||||
<div className={styles.address_div}> | ||||||
<CopyAddress | ||||||
address={identity?.owner ?? ""} | ||||||
iconSize="24" | ||||||
className={styles.copyButton} | ||||||
wallet={false} | ||||||
/> | ||||||
<Typography type={TEXT_TYPE.BODY_SMALL} className={styles.addressText} color="secondary"> | ||||||
{minifyAddress(addressOrDomain ?? identity?.owner, 8)} | ||||||
</Typography> | ||||||
<span className={styles.hide}> | ||||||
{hideBalance ? ("*") : ("$ 2,334.34")} | ||||||
</span> | ||||||
Comment on lines
+97
to
+99
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Add loading state for balance display. While the balance visibility toggle is implemented, the component needs to handle the loading state while fetching the actual balance. + const [isBalanceLoading, setIsBalanceLoading] = useState(true);
+
return (
// ...
<span className={styles.hide}>
- {hideBalance ? ("*") : ("$ 2,334.34")}
+ {isBalanceLoading ? (
+ <span className="animate-pulse">Loading...</span>
+ ) : (
+ hideBalance ? ("*****") : ("$ 2,334.34")
+ )}
</span>
|
||||||
<ShowHideAddress | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Rename it toggleVisibility |
||||||
address={identity?.owner ?? ""} | ||||||
iconSize="24" | ||||||
className={styles.copyButton} | ||||||
wallet={false} | ||||||
hideBalance={hideBalance} | ||||||
setHideBalance={setHideBalance} | ||||||
/> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Improve component naming and prop organization. The
Consider these improvements: - <ShowHideAddress
- address={identity?.owner ?? ""}
- iconSize="24"
- className={styles.copyButton}
- wallet={false}
- hideBalance={hideBalance}
- setHideBalance={setHideBalance}
- />
+ <BalanceVisibilityToggle
+ address={identity?.owner ?? ""}
+ iconSize={24} // Type as number instead of string
+ className={styles.copyButton}
+ hideBalance={hideBalance}
+ onToggle={setHideBalance}
+ /> Also, consider adding prop types validation: interface BalanceVisibilityToggleProps {
address: string;
iconSize: number;
className?: string;
hideBalance: boolean;
onToggle: (hide: boolean) => void;
} |
||||||
</div> | ||||||
{/* {toggle currency close} */} | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 💡 Codebase verification Based on the gathered evidence, I can now provide a final response: Hardcoded balance needs integration with Argent Portfolio service The implementation currently uses a hardcoded balance value ("$ 2,334.34"), while the codebase already has the necessary services for fetching real wallet data:
Required changes:
🔗 Analysis chainVerify wallet integration for balance display. While the UI for showing/hiding the wallet balance is implemented, it currently uses a hardcoded value ("$ 2,334.34"). This doesn't fulfill the PR objective of adding actual wallet amount integration. Please verify:
🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# Search for wallet-related hooks or services
rg -g '!node_modules' -g '!dist' -A 5 'useWallet|WalletService|getBalance'
Length of output: 76 Script: #!/bin/bash
# Let's try different search patterns to find wallet-related functionality
rg -g '!node_modules' -g '!dist' -A 5 'wallet|balance|currency' components/
# Also search for any state management or context related to wallet
rg -g '!node_modules' -g '!dist' -A 5 'createContext.*[Ww]allet|reducer.*[Ww]allet|[Ww]alletContext'
# Look for API or service calls related to wallet
rg -g '!node_modules' -g '!dist' -A 5 'fetch.*balance|api.*wallet|/wallet|/balance'
Length of output: 22046 Script: #!/bin/bash
# Let's check for any integration with Argent portfolio service since we found a reference
ast-grep --pattern 'import { $_ } from "@services/argentPortfolioService"'
# Also search for any hooks or context that might be using the portfolio service
rg -g '!node_modules' -g '!dist' -A 5 'useArgent|usePortfolio|argentPortfolioService'
# Look for any state management related to balance in the profile card component
ast-grep --pattern 'const [$_] = useState($$$)' components/UI/profileCard/profileCard.tsx
Length of output: 731 Script: #!/bin/bash
# Let's examine the implementation in the address/domain page since it imports portfolio services
rg -A 20 'fetchUserTokens' app/[addressOrDomain]/page.tsx
# Also check if there are any props being passed to ProfileCard related to balance
ast-grep --pattern '<ProfileCard $$$balance$$$>'
# Look for any interfaces or types defining ProfileCard props
ast-grep --pattern 'interface ProfileCardProps {
$$$
}'
Length of output: 1498 |
||||||
|
||||||
<div className="flex sm:hidden justify-center py-4"> | ||||||
<SocialMediaActions identity={identity} /> | ||||||
<Link href={shareLink} target="_blank" rel="noreferrer"> | ||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,6 +15,12 @@ To set up a development environment, please follow these steps: | |
cd starknet.quest | ||
npm i && npm run dev | ||
``` | ||
### | ||
To avoid any failure to resolve the dependency tree, the --force flag should be added: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is not the aim of this issue, please remove any change made on this file (someone else is already working on it) |
||
|
||
``` | ||
npm i --force | ||
``` | ||
Comment on lines
+18
to
+23
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fix markdown formatting issues The section has the following formatting issues:
Apply these changes: -###
+### Installing dependencies
To avoid any failure to resolve the dependency tree, the --force flag should be added:
-```
+```sh
npm i --force
|
||
|
||
## Issues and feature requests | ||
|
||
|
@@ -56,4 +62,4 @@ Please try to create bug reports that are: | |
### Understanding the labels on your Pull Request | ||
- If your PR is ready for review or merging then add a label which says - **Ready for Review** | ||
- If your PR is in progress and is not ready for review or merging then add a label which says - **In progress do not merge** | ||
- If the maintainer has reviewed and has asked for a change then they would attach the label - **Changes Requested**. You can address the comments made in the review and add the label **Ready for review** once done so that they can come back to it later and complete the review and merge 🎉 | ||
- If the maintainer has reviewed and has asked for a change then they would attach the label - **Changes Requested**. You can address the comments made in the review and add the label **Ready for review** once done so that they can come back to it later and complete the review and merge 🎉 |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -30,6 +30,16 @@ | |
width: 100%; | ||
} | ||
|
||
.hide{ | ||
font-family: Sora; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I suggest you to use prettier to format the code correctly automatically (because the syntax is not clean in a lot of places) |
||
font-size: 18px; | ||
font-weight: 700; | ||
line-height: 24px; | ||
letter-spacing: 0.01em; | ||
text-align:left; | ||
|
||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Consider adding responsive styles for mobile view. The Add these media query styles: @media (max-width: 768px) {
+ .hide {
+ font-size: 14px;
+ line-height: 20px;
+ }
/* existing mobile styles... */
}
|
||
|
||
.profileCardLoading { | ||
position: absolute; | ||
top: 0; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -20,6 +20,12 @@ module.exports = { | |
300: "#1F1F25", | ||
900: "#1a202c", | ||
}, | ||
extend: { | ||
fontFamily: { | ||
sora: ['Sora', 'sans-serif'], | ||
}, | ||
}, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fix incorrect placement of font family configuration The Move the font family configuration to be directly under the /** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./app/**/*.{html,tsx}", "./components/**/*.{html,tsx}"],
theme: {
+ extend: {
+ fontFamily: {
+ sora: ['Sora', 'sans-serif'],
+ },
+ },
colors: {
primary: "#6AFFAF",
secondary: "#F4FAFF",
secondary300: "#eae0d5",
tertiary: "#BF9E7B",
background: "#101012",
transparent: "transparent",
current: "currentColor",
black: "#000",
white: "#fff",
gray: {
},
- extend: {
- fontFamily: {
- sora: ['Sora', 'sans-serif'],
- },
- },
// ... Other colors you want to add
},
},
plugins: [],
};
|
||
|
||
// ... Other colors you want to add | ||
}, | ||
}, | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fix import inconsistencies and remove unused import.
EyeOffIcon
) than the other icon import (eyeIcon
). Maintain consistent casing across imports.useState
is imported but never used in the component.Apply this diff to fix the issues:
📝 Committable suggestion