css fix

hydralauncher · Jan 18, 2025 · ee0e314 · ee0e314
1 parent d50bb13
commit ee0e314
Show file tree

Hide file tree

Showing 9 changed files with 147 additions and 120 deletions.
diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json
@@ -7,7 +7,7 @@
     "featured": "Destaques",
     "hot": "Populares",
     "weekly": "📅 Mais baixados da semana",
-    "achievements": "🏆 Pra platinar",
+    "achievements": "🏆 Para platinar",
     "surprise_me": "Surpreenda-me",
     "no_results": "Nenhum resultado encontrado",
     "start_typing": "Comece a digitar para pesquisar…"

diff --git a/src/renderer/src/components/text-field/text-field.scss b/src/renderer/src/components/text-field/text-field.scss
@@ -29,47 +29,47 @@
     border-color: vars.$danger-color;
   }
 
-  &__focused {
+  &--focused {
     border-color: vars.$search-border-color-focused;
   }
 
   &:not(&--focused):hover {
     border-color: vars.$search-border-color-hover;
   }
-}
 
-.text-field__input {
-  background-color: transparent;
-  border: none;
-  width: 100%;
-  height: 100%;
-  outline: none;
-  color: vars.$search-input-color;
-  cursor: default;
-  font-family: inherit;
-  text-overflow: ellipsis;
-  padding: vars.$spacing-unit;
+  &__input {
+    background-color: transparent;
+    border: none;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    color: vars.$search-input-color;
+    cursor: default;
+    font-family: inherit;
+    text-overflow: ellipsis;
+    padding: vars.$spacing-unit;
 
-  &:focus {
-    cursor: text;
-  }
+    &:focus {
+      cursor: text;
+    }
 
-  &__read-only {
-    text-overflow: inherit;
+    &__read-only {
+      text-overflow: inherit;
+    }
   }
-}
 
-.text-field__toggle-password-button {
-  cursor: pointer;
-  color: vars.$muted-color;
-  padding: vars.$spacing-unit;
-}
+  &__toggle-password-button {
+    cursor: pointer;
+    color: vars.$muted-color;
+    padding: vars.$spacing-unit;
+  }
 
-.text-field__wrapper {
-  display: flex;
-  gap: vars.$spacing-unit;
-}
+  &__wrapper {
+    display: flex;
+    gap: vars.$spacing-unit;
+  }
 
-.text-field__error-label {
-  color: vars.$danger-color;
-}
+  &__error-label {
+    color: vars.$danger-color;
+  }
+}
diff --git a/src/renderer/src/components/text-field/text-field.tsx b/src/renderer/src/components/text-field/text-field.tsx
@@ -1,7 +1,6 @@
 import React, { useId, useMemo, useState } from "react";
 import { EyeClosedIcon, EyeIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
-
 import cn from "classnames";
 
 import "./text-field.scss";
@@ -42,9 +41,7 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
   ) => {
     const id = useId();
     const [isFocused, setIsFocused] = useState(false);
-
     const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-
     const { t } = useTranslation("forms");
 
     const showPasswordToggleButton = props.type === "password";
@@ -57,7 +54,7 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
     const hintContent = useMemo(() => {
       if (error && typeof error === "object" && "message" in error)
         return (
-          <small className="text-field-container__error-label">
+          <small className="text-field__error-label">
             {error.message as string}
           </small>
         );
@@ -82,24 +79,19 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
       <div className="text-field-container" {...containerProps}>
         {label && <label htmlFor={id}>{label}</label>}
 
-        <div className="text-field-container__text-field-wrapper">
+        <div className="text-field__wrapper">
           <div
-            className={cn(
-              "text-field-container__text-field",
-              `text-field-container__text-field--${theme}`,
-              {
-                "text-field-container__text-field__has-error": hasError,
-                "text-field-container__text-field__focused": isFocused,
-              }
-            )}
+            className={cn("text-field", `text-field__${theme}`, {
+              "text-field__has-error": hasError,
+              "text-field--focused": isFocused,
+            })}
             {...textFieldProps}
           >
             <input
               ref={ref}
               id={id}
-              className={cn("text-field-container__text-field-input", {
-                "text-field-container__text-field-input__read-only":
-                  props.readOnly,
+              className={cn("text-field__input", {
+                "text-field__input__read-only": props.readOnly,
               })}
               {...props}
               onFocus={handleFocus}
@@ -110,7 +102,7 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
             {showPasswordToggleButton && (
               <button
                 type="button"
-                className="text-field-container__toggle-password-button"
+                className="text-field__toggle-password-button"
                 onClick={() => setIsPasswordVisible(!isPasswordVisible)}
                 aria-label={t("toggle_password_visibility")}
               >
@@ -132,4 +124,4 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
   }
 );
 
-TextField.displayName = "TextField";
+TextField.displayName = "TextField";
diff --git a/src/renderer/src/pages/achievements/achievements.tsx b/src/renderer/src/pages/achievements/achievements.tsx
@@ -76,7 +76,7 @@ export default function Achievements() {
             (otherUserId && comparedAchievements === null);
 
           return (
-            <SkeletonTheme baseColor="#1c1c1c" highlightColor="#444">
+            <SkeletonTheme baseColor="var(--background-color)" highlightColor="#444">
               {showSkeleton ? (
                 <AchievementsSkeleton />
               ) : (

diff --git a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss
@@ -3,7 +3,7 @@
 .sidebar-section {
   &__button {
     height: 72px;
-    padding: #{vars.$spacing-unit * 2};
+    padding: #{vars.$spacing-unit * 2} #{vars.$spacing-unit * 2};
     display: flex;
     align-items: center;
     background-color: vars.$background-color;

diff --git a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.tsx b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.tsx
@@ -31,7 +31,7 @@ export function SidebarSection({ title, children }: SidebarSectionProps) {
       >
         <ChevronDownIcon
           className={classNames("chevron", {
-            "chevron--open": isOpen,
+            "sidebar-section__chevron--open": isOpen,
           })}
         />
         <span>{title}</span>

diff --git a/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx b/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx
@@ -40,15 +40,15 @@ export function HowLongToBeatSection({
                   className="sidebar__how-long-to-beat-category"
                 >
                   <p
-                    className="sidebar__how-long-to-beat-category"
+                    className="sidebar__how-long-to-beat-category-label"
                     style={{
                       fontWeight: "bold",
                     }}
                   >
                     {category.title}
                   </p>
 
-                  <p className="sidebar__how-long-to-beat-category">
+                  <p className="sidebar__how-long-to-beat-category-label">
                     {getDuration(category.duration)}
                   </p>