improve the rss setting ui

Author: medyo

src/features/settings/components/RssSetting.tsx

@@ -69,7 +69,12 @@ export const RssSetting = ({ setSelectedCards }: RssSettingProps) => {
 
   return (
     <div className="settingRow">
-      <p className="settingTitle">Add New Source</p>
+      <p className="settingTitle">
+        Add New Source
+        <div>
+          <span className="settingHint">(RSS Feed)</span>
+        </div>
+      </p>
       <div className="settingContent">
         <div className="form">
           <input
@@ -81,9 +86,9 @@ export const RssSetting = ({ setSelectedCards }: RssSettingProps) => {
           {isRssInputLoading ? (
             <BeatLoader color={'#A9B2BD'} loading={isRssInputLoading} size={6} />
           ) : (
-            <div>
+            <div className="rightContent">
               <button className="rssButton" onClick={onRssAddClick}>
-                <BsRssFill /> Add Rss Feed
+                <BsRssFill /> Add
               </button>
             </div>
           )}

src/features/settings/components/settings.css

@@ -49,11 +49,12 @@ Modal
 
 .settingContent .form {
   display: flex;
-  flex-direction: column;
-  row-gap: 12px;
+  flex-direction: row;
+  gap: 12px;
 }
 
 .settingContent input[type=text] {
+  flex:1;
   background-color: var(--settings-input-background-color);
   border:1px solid var(--settings-input-border-color);
   border-radius: 50px;
@@ -68,6 +69,11 @@ Modal
   font-size: 14px;
 }
 
+.settingContent .rightContent {
+  display: flex;
+  justify-content: end;
+}
+
 .settingContent input[type=text]:focus {
   border-color:var(--settings-input-border-focus-color)
 }