Mostly unfixed

Bitslayn · Jun 2, 2024 · 2911b91 · 2911b91
1 parent 274999a
commit 2911b91
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git a/plugins/btw.bitslayn.channelIcons/src/TabBar.tsx b/plugins/btw.bitslayn.channelIcons/src/TabBar.tsx
@@ -19,7 +19,7 @@ export const TabBar = ({ tabs }) => {
 
   return (
     <div style={{ textAlign: "center" }}>
-      <div className="channelTabBar" style={{ position: "fixed", top: "97px" }}>
+      <div className="channelTabBar">
         {tabs.map(
           (tab: {
             id: React.Key;
@@ -61,7 +61,7 @@ export const TabBar = ({ tabs }) => {
             </div>
           )
         )}
-        <Divider.Divider style={{ width: "417px" }}></Divider.Divider>
+        <Divider.Divider></Divider.Divider>
       </div>
       <div>{tabs.map(tab => activeTab === tab.id && tab.element())}</div>
     </div>

diff --git a/plugins/btw.bitslayn.channelIcons/src/index.tsx b/plugins/btw.bitslayn.channelIcons/src/index.tsx
@@ -100,7 +100,6 @@ function openEditor(data: any): void {
               flexWrap: "wrap",
               alignContent: "flex-start",
               width: "431px",
-              marginTop: "76px",
               maxHeight: "251px",
               paddingBottom: "3px",
               columnGap: "3px",
@@ -231,20 +230,17 @@ function openEditor(data: any): void {
         header={`Customize #${channel.name}`}
         className="channelEditor"
         {...props}>
-        <ChannelClass.default
-          className="channelExample"
-          channel={ChannelStore.getChannel(channel.id)}
-        />
-        <div className="channelEditorHeader">
+        <div // Content
+          className="channelEditorContent"
+          style={{ width: "431px" }}>
           <components.FormItem>
             <components.TextInput
               placeholder="Search icons"
               style={{
                 display: "flex",
-                position: "fixed",
                 width: "417px",
                 //width: "300px",
-                height: "30px",
+                height: "34px",
                 top: "56px",
                 //left: "74px",
               }}
@@ -253,11 +249,29 @@ function openEditor(data: any): void {
               {...util}
             />
           </components.FormItem>
+          <div style={{ position: "absolute" }}>
+            <svg
+              aria-label="Search"
+              aria-hidden="false"
+              role="img"
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              fill="none"
+              viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                fill-rule="evenodd"
+                d="M15.62 17.03a9 9 0 1 1 1.41-1.41l4.68 4.67a1 1 0 0 1-1.42 1.42l-4.67-4.68ZM17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"
+                clip-rule="evenodd"></path>
+            </svg>
+          </div>
+          <div className="channelEditorSelector">
+            <TabBar tabs={icons} />
+          </div>
         </div>
-        <div className="channelEditorSelector">
-          <TabBar tabs={icons} />
-        </div>
-        <div
+
+        <div // Sidebar
           className="channelEditorSidebar"
           style={{
             display: "flex",
@@ -278,6 +292,11 @@ function openEditor(data: any): void {
             suggestedColors={suggestedColors}
           />
         </div>
+
+        <ChannelClass.default
+          className="channelExample"
+          channel={ChannelStore.getChannel(channel.id)}
+        />
       </Modals.ConfirmModal>
     );
   };