Aesthetic changes

- Icon change for "Unlisted"
- Dynamic text size for compose field depending on char count

src/components/account.css

@@ -10,7 +10,7 @@
 
 #account-container .note {
   font-size: 95%;
-  line-height: 1.5;
+  line-height: 1.4;
 }
 #account-container .note:not(:has(p)) {
   /* Some notes don't have <p> tags, so we need to add some padding */

src/components/compose.css

@@ -26,11 +26,20 @@
 #compose-container textarea {
   width: 100%;
   max-width: 100%;
-  height: 3em;
-  min-height: 3em;
+  height: 4em;
+  min-height: 4em;
   max-height: 10em;
   resize: vertical;
+  line-height: 1.4;
 }
+
+@media (min-width: 40em) {
+  #compose-container textarea {
+    font-size: 150%;
+    font-size: calc(100% + 50% / var(--text-weight));
+  }
+}
+
 @keyframes appear-up {
   0% {
     opacity: 0;

src/components/compose.jsx

@@ -744,7 +744,6 @@ function Compose({
         </div>
         <text-expander ref={textExpanderRef} keys="@ # :">
           <textarea
-            class="large"
             ref={textareaRef}
             placeholder={
               replyToStatus
@@ -774,6 +773,7 @@ function Compose({
             }}
             style={{
               maxHeight: `${maxCharacters / 50}em`,
+              '--text-weight': (1 + charCount / 140).toFixed(1) || 1,
             }}
           ></textarea>
         </text-expander>

src/components/icon.jsx

@@ -44,6 +44,7 @@ const ICONS = {
   'chevron-left': 'mingcute:left-line',
   reply: ['mingcute:share-forward-line', '180deg', 'horizontal'],
   thread: 'mingcute:route-line',
+  group: 'mingcute:group-line',
 };
 
 function Icon({ icon, size = 'm', alt, title, class: className = '' }) {

src/components/name-text.css

@@ -15,5 +15,4 @@ a.name-text.short:hover i {
 
 .name-text .avatar {
   vertical-align: middle;
-  margin-right: 4px;
-}
+}

src/components/status.css

@@ -37,7 +37,7 @@
 /* STATUS PRE META */
 
 .status-pre-meta {
-  line-height: 1.5;
+  line-height: 1.4;
   padding: 8px 16px 0;
   opacity: 0.75;
   font-size: smaller;
@@ -61,7 +61,7 @@
 .status {
   display: flex;
   padding: 16px 16px 20px;
-  line-height: 1.5;
+  line-height: 1.4;
   align-items: flex-start;
   position: relative;
 }
@@ -92,7 +92,7 @@
   min-width: 0;
 }
 .status:not(.small) .container {
-  padding-left: 16px;
+  padding-left: 12px;
 }
 
 .status > .container > .meta {
@@ -170,7 +170,7 @@
 }
 
 .status .content-container.has-spoiler .spoiler {
-  margin: 8px 0;
+  margin: 4px 0;
   font-size: 90%;
   border: 1px dashed var(--button-bg-color);
   display: flex;
@@ -199,7 +199,7 @@
 }
 
 .status .content {
-  margin-top: 8px;
+  margin-top: 2px;
 }
 .timeline-deck .status .content {
   max-height: 50vh;

src/pages/notifications.css

@@ -1,7 +1,7 @@
 .notification {
   display: flex;
   padding: 16px !important;
-  gap: 16px;
+  gap: 12px;
 }
 .only-mentions .notification:not(.mention),
 .only-mentions .timeline-empty {
@@ -62,6 +62,7 @@
 }
 .notification-content p:first-child {
   margin-top: 0;
+  margin-bottom: 8px;
 }
 
 #mentions-option {

src/utils/visibility-icons-map.js

@@ -1,6 +1,6 @@
 export default {
   public: 'earth',
-  unlisted: 'unlock',
+  unlisted: 'group',
   private: 'lock',
   direct: 'message',
 };