style: PRIVATE_GAUGE_VISIBLE_PIXELS

ajktown · Sep 28, 2024 · 65a18eb · 65a18eb
1 parent 7851982
commit 65a18eb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/components/organism_appbar/index.tsx b/src/components/organism_appbar/index.tsx
@@ -14,7 +14,8 @@ import RitualsFrameGauge from '../organism_rituals_frame/index.gauge'
 
 const PRIVATE_TITLE = `Consistency GPT (Beta)`
 const PRIVATE_SHORTER_TITLE = `CGT`
-const PRIVATE_TITLE_SHRINK_PIXELS = 500
+const PRIVATE_TITLE_VISIBLE_PIXELS = 500
+const PRIVATE_GAUGE_VISIBLE_PIXELS = 850
 const PRIVATE_TITLE_LOGO = `/favicon_archived/android-chrome-512x512.png`
 interface Props {
   nickname?: string
@@ -36,7 +37,7 @@ const Appbar: FC<Props> = ({ children, nickname }) => {
             height={30}
             style={{ marginRight: 8 }}
           />
-          {width <= PRIVATE_TITLE_SHRINK_PIXELS && (
+          {width <= PRIVATE_TITLE_VISIBLE_PIXELS && (
             <Typography
               variant="h6"
               color="inherit"
@@ -47,7 +48,7 @@ const Appbar: FC<Props> = ({ children, nickname }) => {
               {nickname && ` - ${nickname}`}
             </Typography>
           )}
-          {PRIVATE_TITLE_SHRINK_PIXELS < width && (
+          {PRIVATE_TITLE_VISIBLE_PIXELS <= width && (
             <Typography
               variant="h6"
               color="inherit"
@@ -60,7 +61,7 @@ const Appbar: FC<Props> = ({ children, nickname }) => {
           )}
           <Box pr={2} />
           <Box flexGrow={1} />
-          <RitualsFrameGauge />
+          {PRIVATE_GAUGE_VISIBLE_PIXELS <= width && <RitualsFrameGauge />}
           <RitualsFrameRefreshButton nickname={nickname} />
           <Box pr={1} />
           <AppbarGitHubButtonPart />

diff --git a/src/components/organism_rituals_frame/index.gauge.tsx b/src/components/organism_rituals_frame/index.gauge.tsx
@@ -33,12 +33,12 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
  * @returns
  */
 const RitualsFrameGauge: FC<Props> = () => {
-  const value = useRecoilValue(actionGroupAchievedPercentSelector)
+  const percentage = useRecoilValue(actionGroupAchievedPercentSelector)
 
   return (
     <Box minWidth={200} alignItems={`center`}>
-      <BorderLinearProgress variant="determinate" value={value} />
-      <Typography>{`${value}%`}</Typography>
+      <BorderLinearProgress variant="determinate" value={percentage} />
+      <Typography>{`${percentage}%`}</Typography>
     </Box>
   )
 }