Improved layout of wave creation form

ecency · Nov 18, 2024 · b6b48d0 · b6b48d0
1 parent 92f33a1
commit b6b48d0
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 8 deletions.
diff --git a/src/app/waves/layout.tsx b/src/app/waves/layout.tsx
@@ -7,9 +7,10 @@ export default function WavesLayout(props: PropsWithChildren) {
       <Feedback />
       <ScrollToTop />
       <Navbar />
-      <div className="container mx-auto grid grid-cols-12">
+      <div className="container mt-[156px] mx-auto grid grid-cols-12">
+        <div className="col-span-3"></div>
+        <div className="col-span-6">{props.children}</div>
         <div className="col-span-3"></div>
-        <div className="col-span-12 lg:col-span-8 xl:col-span-7 mt-[156px]">{props.children}</div>
       </div>
     </div>
   );

diff --git a/src/features/shared/available-credits/index.scss b/src/features/shared/available-credits/index.scss
@@ -6,7 +6,7 @@
     overflow: hidden;
 
     .available-credits-progress {
-      @apply bg-gray-200;
+      @apply bg-gray-200 dark:bg-gray-900;
       height: 8px;
       width: 100%;
       border-radius: 4px;

diff --git a/src/features/waves/components/wave-form/index.tsx b/src/features/waves/components/wave-form/index.tsx
@@ -188,7 +188,8 @@ export const WaveForm = ({
           submit={
             <Button
               onClick={submit}
-              disabled={disabled || loading}
+              disabled={disabled}
+              isLoading={loading}
               className="justify-self-end"
               size="sm"
             >

diff --git a/src/features/waves/components/wave-form/wave-form-control.tsx b/src/features/waves/components/wave-form/wave-form-control.tsx
@@ -28,7 +28,7 @@ export const WaveFormControl = ({
   return (
     <div className="pt-4">
       <TextareaAutosize
-        className="w-full min-h-[8rem] outline-none border-0 resize-none bg-transparent"
+        className="w-full min-h-[8rem] rounded-xl p-2 lg:p-4 bg-gray-100 dark:bg-dark-default outline-none border-0 resize-none"
         placeholder={placeholder ?? i18next.t("decks.threads-form.input-placeholder")}
         value={text}
         onChange={(e) => setText(e.target.value)}

diff --git a/src/features/waves/components/wave-form/wave-form-thread-selection.tsx b/src/features/waves/components/wave-form/wave-form-thread-selection.tsx
@@ -4,7 +4,6 @@ import { Button } from "@ui/button";
 import i18next from "i18next";
 import { UserAvatar } from "@/features/shared";
 import { AVAILABLE_THREAD_HOSTS } from "@/features/waves";
-import { UilArrowDown } from "@tooni/iconscout-unicons-react";
 
 interface Props {
   host: string | undefined;
@@ -17,7 +16,7 @@ export const WaveFormThreadSelection = ({ host, setHost }: Props) => {
       <div className="text-sm opacity-50">{i18next.t("decks.threads-form.thread-host")}</div>
       <Dropdown>
         <DropdownToggle>
-          <Button size="sm" outline={true} icon={<UilArrowDown className="w-3 h-3" />}>
+          <Button size="sm" appearance="link" noPadding={true}>
             @{host ? host : i18next.t("decks.threads-form.select-thread-host")}
           </Button>
         </DropdownToggle>

diff --git a/src/features/waves/components/wave-form/wave-form-toolbar.tsx b/src/features/waves/components/wave-form/wave-form-toolbar.tsx
@@ -17,7 +17,7 @@ export const WaveFormToolbar = ({ onAddImage, onEmojiPick, submit }: Props) => {
   const [show, setShow] = useState(false);
 
   return (
-    <div className="flex items-center justify-between p-4">
+    <div className="flex items-center justify-between py-4">
       <div className="flex items-center">
         <WaveFormToolbarImagePicker onAddImage={onAddImage} />
         <WaveFormEmojiPicker onPick={onEmojiPick} />