refactor: Update component styles

- Simplify component styles for codeAreaComponent, dropdownComponent, floatComponent, inputComponent, inputFileComponent, intComponent, promptComponent, and textAreaComponent.
- Remove unnecessary classes and styling.
- Improve overall readability and maintainability of the code.
This commit is contained in:
Rodrigo Nader 2023-06-30 18:07:10 -03:00
commit 295f08f2b3
10 changed files with 13 additions and 13 deletions

View file

@ -48,7 +48,7 @@ export default function CodeAreaComponent({
}} }}
className={ className={
editNode editNode
? "truncate cursor-pointer placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring border-1 shadow-sm text-sm bg-transparent sm:text-sm" + ? "truncate cursor-pointer placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring border shadow-sm text-sm bg-transparent sm:text-sm" +
INPUT_STYLE INPUT_STYLE
: "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" + : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" +
INPUT_STYLE + INPUT_STYLE +

View file

@ -40,9 +40,9 @@ export default function Dropdown({
<Listbox.Button <Listbox.Button
className={ className={
editNode editNode
? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border-ring border-1" + ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border" +
INPUT_STYLE INPUT_STYLE
: "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm bg-background" + : "placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md shadow-sm sm:text-sm border" +
INPUT_STYLE INPUT_STYLE
} }
> >

View file

@ -58,9 +58,9 @@ export default function FloatComponent({
value={myValue} value={myValue}
className={ className={
editNode editNode
? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" + ? "focus:placeholder-transparent text-center placeholder:text-center border block w-full pt-0.5 pb-0.5 form-input rounded-md border-border shadow-sm sm:text-sm placeholder:text-muted-foreground" +
INPUT_STYLE INPUT_STYLE
: "focus:placeholder-transparent block w-full form-input placeholder:text-muted-foreground bg-background rounded-md border-ring shadow-sm ring-offset-input sm:text-sm" + : "focus:placeholder-transparent block w-full form-input placeholder:text-muted-foreground bg-background rounded-md border-border shadow-sm ring-offset-input sm:text-sm" +
INPUT_STYLE + INPUT_STYLE +
(disabled ? " bg-input" : "") (disabled ? " bg-input" : "")
} }

View file

@ -50,7 +50,7 @@ export default function InputComponent({
disabled ? " bg-input" : "", disabled ? " bg-input" : "",
password && !pwdVisible && myValue !== "" ? "password" : "", password && !pwdVisible && myValue !== "" ? "password" : "",
editNode editNode
? "border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm text-center" + ? "border block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm text-center" +
INPUT_STYLE INPUT_STYLE
: "ring-offset-input" + INPUT_STYLE, : "ring-offset-input" + INPUT_STYLE,
password && editNode ? "pr-8" : "pr-3" password && editNode ? "pr-8" : "pr-3"

View file

@ -103,7 +103,7 @@ export default function InputFileComponent({
onClick={handleButtonClick} onClick={handleButtonClick}
className={ className={
editNode editNode
? "truncate placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm border-1" + ? "truncate placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm border" +
INPUT_STYLE INPUT_STYLE
: "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" + : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" +
INPUT_STYLE + INPUT_STYLE +

View file

@ -72,9 +72,9 @@ export default function IntComponent({
value={myValue} value={myValue}
className={ className={
editNode editNode
? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" + ? "focus:placeholder-transparent text-center placeholder:text-center border block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm placeholder:text-muted-foreground" +
INPUT_STYLE INPUT_STYLE
: "focus:placeholder-transparent block w-full form-input bg-background rounded-md border-ring shadow-sm ring-offset-background sm:text-sm placeholder:text-muted-foreground" + : "focus:placeholder-transparent block w-full form-input bg-background rounded-md shadow-sm ring-offset-background sm:text-sm placeholder:text-muted-foreground" +
INPUT_STYLE + INPUT_STYLE +
(disabled ? " bg-input" : "") (disabled ? " bg-input" : "")
} }

View file

@ -49,7 +49,7 @@ export default function PromptAreaComponent({
}} }}
className={ className={
editNode editNode
? "cursor-pointer truncate placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm" + ? "cursor-pointer truncate placeholder:text-center text-ring border block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm" +
INPUT_STYLE INPUT_STYLE
: "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" + : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" +
(disabled ? " bg-input" : "") (disabled ? " bg-input" : "")

View file

@ -52,7 +52,7 @@ export default function TextAreaComponent({
}} }}
className={ className={
editNode editNode
? "truncate cursor-pointer placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring bg-transparent shadow-sm sm:text-sm" + ? "truncate cursor-pointer placeholder:text-center text-ring border block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring bg-transparent shadow-sm sm:text-sm" +
INPUT_STYLE INPUT_STYLE
: "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" + : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" +
(disabled ? " bg-input" : "") (disabled ? " bg-input" : "")

View file

@ -171,7 +171,7 @@ export const EXPORT_CODE_DIALOG =
* @constant * @constant
*/ */
export const INPUT_STYLE = export const INPUT_STYLE =
"focus:tw-ring-none focus-visible:outline-none focus:ring-ring bg-background focus:outline-none"; " focus:tw-ring-none border-border focus-visible:outline-none focus:ring-ring focus:ring-1 bg-background focus:outline-none";
/** /**
* The base text for subtitle of code dialog * The base text for subtitle of code dialog

View file

@ -126,7 +126,7 @@ export default function ExtraSidebar() {
placeholder="Search" placeholder="Search"
className={ className={
INPUT_STYLE + INPUT_STYLE +
"w-full border-1 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" "w-full border rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
} }
onChange={(e) => { onChange={(e) => {
handleSearchInput(e.target.value); handleSearchInput(e.target.value);