Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/structures/_RoomSearch.pcss

@@ -40,6 +40,7 @@ limitations under the License.
         margin-left: 7px;
         margin-bottom: 2px;
         flex-shrink: 0;
+        mask-size: 20px;
     }
 
     .mx_RoomSearch_spotlightTriggerText {

res/css/views/audio_messages/_PlayPauseButton.pcss

@@ -29,6 +29,10 @@ limitations under the License.
         background-color: $secondary-content;
         mask-repeat: no-repeat;
         mask-size: contain;
+        top: 6px; /* center */
+        left: 6px; /* center */
+        width: 20px;
+        height: 20px;
     }
 
     &.mx_PlayPauseButton_disabled::before {
@@ -36,18 +40,10 @@ limitations under the License.
     }
 
     &.mx_PlayPauseButton_play::before {
-        width: 13px;
-        height: 16px;
-        top: 8px; /* center */
-        left: 12px; /* center */
         mask-image: url("@vector-im/compound-design-tokens/icons/play-solid.svg");
     }
 
     &.mx_PlayPauseButton_pause::before {
-        width: 10px;
-        height: 12px;
-        top: 10px; /* center */
-        left: 11px; /* center */
         mask-image: url("@vector-im/compound-design-tokens/icons/pause-solid.svg");
     }
 }

res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss

@@ -44,7 +44,7 @@ limitations under the License.
     }
 
     .mx_AnalyticsLearnMore_bullets li {
-        background: url("@vector-im/compound-design-tokens/icons/check-circle.svg") no-repeat;
+        background: url("$(res)/img/tick-circle.svg") no-repeat;
         list-style-type: none;
         padding: 2px 0px 20px 32px;
         vertical-align: middle;

res/css/views/dialogs/_SpotlightDialog.pcss

@@ -130,8 +130,8 @@ limitations under the License.
                     mask-repeat: no-repeat;
                     mask-position: center;
                     mask-size: contain;
-                    width: 8px;
+                    width: 16px;
-                    height: 8px;
+                    height: 16px;
                     position: absolute;
                     left: 50%;
                     top: 50%;

res/css/views/elements/_CopyableText.pcss

@@ -34,8 +34,8 @@ limitations under the License.
     .mx_CopyableText_copyButton {
         flex-shrink: 0;
         /* using em here to adapt to the local font size */
-        width: 1em;
+        width: 20px;
-        height: 1em;
+        height: 20px;
         cursor: pointer;
         padding-left: 12px;
         padding-right: 10px;
@@ -44,7 +44,7 @@ limitations under the License.
         position: sticky;
         right: 0;
         /* center to first line */
-        top: 0.15em;
+        top: 0;
         background-color: $background;
 
         &::before {
@@ -54,8 +54,8 @@ limitations under the License.
             mask-repeat: no-repeat;
             mask-size: contain;
             background-color: $message-action-bar-fg-color;
-            width: 1em;
+            width: inherit;
-            height: 1em;
+            height: inherit;
             display: block;
             background-repeat: no-repeat;
         }

res/css/views/elements/_Dropdown.pcss

@@ -47,11 +47,12 @@ limitations under the License.
 }
 
 .mx_Dropdown_arrow {
-    width: 10px;
+    width: 20px;
-    height: 6px;
+    height: 20px;
     padding-right: 9px;
     mask: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
     mask-repeat: no-repeat;
+    mask-size: contain;
     background: $primary-content;
 }
 

res/css/views/rooms/_TopUnreadMessagesBar.pcss

@@ -73,7 +73,6 @@ limitations under the License.
     height: 18px;
     mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
     mask-repeat: no-repeat;
-    mask-size: 10px;
+    mask-size: contain;
-    mask-position: 4px 4px;
     background: var(--cpd-color-icon-tertiary);
 }

res/css/views/spaces/_SpaceCreateMenu.pcss

@@ -52,7 +52,7 @@ limitations under the License.
 
         .mx_SpaceCreateMenuType_private::before {
             mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
-            mask-size: 18px;
+            mask-size: 26px;
         }
 
         .mx_SpaceCreateMenu_back {

res/css/views/user-onboarding/_UserOnboardingTask.pcss

@@ -80,11 +80,11 @@ limitations under the License.
                 mask-repeat: no-repeat;
                 mask-position: center;
                 mask-size: contain;
-                width: 16px;
+                width: 24px;
-                height: 16px;
+                height: 24px;
                 position: absolute;
-                left: calc(50% - 8px);
+                left: calc(50% - 12px);
-                top: calc(50% - 8px);
+                top: calc(50% - 12px);
                 mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
 
                 animation-duration: 300ms;

res/img/tick-circle.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2V2Z" stroke="#0DBD8B" stroke-width="2" stroke-linecap="square"/>
+<path d="M6.54549 12.8882L9.80306 16.2426L17.4546 8.36377" stroke="#0DBD8B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>