From 41c85e3b6d72c6ddf205d6465f6252618fb30956 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Sat, 17 Feb 2024 18:52:37 +0100
Subject: [PATCH 1/2] Change list title input design to fit upstream (#2626)

* Change settings input field design to match upstream's

* Fix light theme discrepancies

* Restore regexp inputs as glitch-soc-specific styles
---
 .../glitch/components/setting_text.jsx        |   2 +-
 .../flavours/glitch/styles/components.scss    | 121 ++++++++----------
 .../glitch/styles/mastodon-light/diff.scss    |   6 +-
 3 files changed, 59 insertions(+), 70 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/setting_text.jsx b/app/javascript/flavours/glitch/components/setting_text.jsx
index 79d4bf8ea3..bb11a6bff9 100644
--- a/app/javascript/flavours/glitch/components/setting_text.jsx
+++ b/app/javascript/flavours/glitch/components/setting_text.jsx
@@ -23,7 +23,7 @@ export default class SettingText extends PureComponent {
       <label>
         <span style={{ display: 'none' }}>{label}</span>
         <input
-          className='setting-text'
+          className='glitch-setting-text'
           value={settings.getIn(settingPath)}
           onChange={this.handleChange}
           placeholder={label}
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index d5de4ce4fc..1f5b6793a3 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -2945,7 +2945,6 @@ $ui-header-height: 55px;
   cursor: pointer;
   white-space: nowrap;
   font-size: 16px;
-  flex: 0 0 auto;
   padding: 0;
   padding-inline-end: 5px;
   z-index: 3;
@@ -3213,8 +3212,7 @@ $ui-header-height: 55px;
   }
 }
 
-.setting-text {
-  display: block;
+input.glitch-setting-text {
   box-sizing: border-box;
   color: $darker-text-color;
   background: transparent;
@@ -3232,15 +3230,57 @@ $ui-header-height: 55px;
     border-bottom-color: $ui-highlight-color;
   }
 
-  &.light {
-    color: $inverted-text-color;
-    border-bottom: 2px solid lighten($ui-base-color, 27%);
+  @media screen and (width <= 600px) {
+    font-size: 16px;
+  }
+}
 
-    &:focus,
-    &:active {
-      color: $inverted-text-color;
-      border-bottom-color: $ui-highlight-color;
+.setting-text {
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  color: $inverted-text-color;
+  background: $white;
+  padding: 7px 10px;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 22px;
+  border-radius: 4px;
+  border: 1px solid $white;
+
+  &:focus {
+    outline: 0;
+    border-color: lighten($ui-highlight-color, 12%);
+  }
+
+  &__wrapper {
+    background: $white;
+    border: 1px solid $ui-secondary-color;
+    margin-bottom: 10px;
+    border-radius: 4px;
+
+    .setting-text {
+      border: 0;
+      margin-bottom: 0;
+      border-radius: 0;
+
+      &:focus {
+        border: 0;
+      }
     }
+
+    &__modifiers {
+      color: $inverted-text-color;
+      font-family: inherit;
+      font-size: 14px;
+      background: $white;
+    }
+  }
+
+  &__toolbar {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
   }
 
   @media screen and (width <= 600px) {
@@ -6448,56 +6488,11 @@ a.status-card.compact:hover {
   }
 
   .setting-text {
-    display: block;
-    box-sizing: border-box;
     width: 100%;
-    margin: 0;
-    color: $inverted-text-color;
-    background: $white;
-    padding: 10px;
-    font-family: inherit;
-    font-size: 14px;
     resize: none;
-    outline: 0;
-    border-radius: 4px;
-    border: 1px solid $ui-secondary-color;
     min-height: 100px;
     max-height: 50vh;
-    margin-bottom: 10px;
-
-    &:focus {
-      border: 1px solid darken($ui-secondary-color, 8%);
-    }
-
-    &__wrapper {
-      background: $white;
-      border: 1px solid $ui-secondary-color;
-      margin-bottom: 10px;
-      border-radius: 4px;
-
-      .setting-text {
-        border: 0;
-        margin-bottom: 0;
-        border-radius: 0;
-
-        &:focus {
-          border: 0;
-        }
-      }
-
-      &__modifiers {
-        color: $inverted-text-color;
-        font-family: inherit;
-        font-size: 14px;
-        background: $white;
-      }
-    }
-
-    &__toolbar {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 20px;
-    }
+    border: 0;
   }
 
   .setting-toggle {
@@ -7738,10 +7733,10 @@ noscript {
 }
 
 .column-inline-form {
-  padding: 7px 15px;
-  padding-inline-end: 5px;
+  padding: 15px;
   display: flex;
   justify-content: flex-start;
+  gap: 15px;
   align-items: center;
   background: lighten($ui-base-color, 4%);
 
@@ -7750,18 +7745,8 @@ noscript {
 
     input {
       width: 100%;
-      margin-bottom: 6px;
-
-      &:focus {
-        outline: 0;
-      }
     }
   }
-
-  .icon-button {
-    flex: 0 0 auto;
-    margin: 0 5px;
-  }
 }
 
 .drawer__backdrop {
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
index 740d7222f8..0f3a6fa32f 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
@@ -80,6 +80,10 @@ html {
   background: $white;
 }
 
+.column-header {
+  border-bottom: 0;
+}
+
 .column-header__button.active {
   color: $ui-highlight-color;
 
@@ -422,7 +426,7 @@ html {
 .column-header__collapsible-inner {
   background: darken($ui-base-color, 4%);
   border: 1px solid lighten($ui-base-color, 8%);
-  border-top: 0;
+  border-bottom: 0;
 }
 
 .column-settings__hashtags .column-select__option {

From d86b642dc604e5c3a53192bc65ff7f991b4a835c Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Sat, 17 Feb 2024 18:52:59 +0100
Subject: [PATCH 2/2] Fix dead and misapplied CSS (#2627)

---
 .../flavours/glitch/styles/components.scss    | 32 ++-----------------
 1 file changed, 2 insertions(+), 30 deletions(-)

diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 1f5b6793a3..029c87c814 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -1240,17 +1240,6 @@ body > [data-popper-placement] {
     font-size: 14px;
     font-weight: 500;
   }
-
-  &.copyable {
-    transition: all 300ms linear;
-  }
-
-  &.copied {
-    border-color: $valid-value-color;
-    color: $valid-value-color;
-    transition: none;
-    background-color: rgba($valid-value-color, 0.15);
-  }
 }
 
 .domain__wrapper {
@@ -5680,20 +5669,6 @@ a.status-card.compact:hover {
   & > div:last-child .status {
     border-bottom: 0;
   }
-
-  & > .hashtag {
-    display: block;
-    padding: 10px;
-    color: $secondary-text-color;
-    text-decoration: none;
-
-    &:hover,
-    &:active,
-    &:focus {
-      color: lighten($secondary-text-color, 4%);
-      text-decoration: underline;
-    }
-  }
 }
 
 .search-results__hashtag {
@@ -6997,6 +6972,8 @@ img.modal-warning {
   position: absolute;
 }
 
+/* End Media Gallery */
+
 .detailed,
 .fullscreen {
   .video-player__volume__current,
@@ -9927,11 +9904,6 @@ noscript {
   &:active {
     background: rgba($ui-base-color, 0.85);
   }
-
-  .icon {
-    width: 15px;
-    height: 15px;
-  }
 }
 
 .hashtag-header {