style: replace segment buttons with anchor

Author: peterpeterparker

studio/src/app/components/feed/app-demo/app-demo.scss

@@ -4,6 +4,27 @@
   div.container {
     display: var(--demo-display);
     width: 100%;
+
+    div.type-selection {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+
+      padding-bottom: 16px;
+
+      ion-anchor {
+        padding: 8px 16px;
+        cursor: pointer;
+        color: var(--ion-color-medium);
+
+        &.selected {
+          background: var(--ion-color-primary);
+          color: white;
+          border-radius: 16px;
+        }
+      }
+    }
   }
 }
 
@@ -183,8 +204,11 @@ div.tablet-container {
 }
 
 div.beamer-container {
-  height: 200px;
-  padding: 8px 16px;
+  height: 240px;
+}
+
+div.beamer-container, div.laptop-container, div.tablet-container, div.smartphone-container {
+  min-height: 240px;
 }
 
 iframe {

studio/src/app/components/feed/app-demo/app-demo.tsx

@@ -17,26 +17,26 @@ export class AppDemo {
     @State()
     private type: DemoType = DemoType.MOBILE;
 
-    private switchType(e: CustomEvent) {
-        this.type = DemoType[e.detail.value.toUpperCase()] as DemoType;
+    private switchType(type: DemoType) {
+        this.type = type;
     }
 
     render() {
         return <div class="container">
-            <ion-segment onIonChange={(e: CustomEvent) => this.switchType(e)}>
-                <ion-segment-button value="mobile" checked={this.type === DemoType.MOBILE}>
+            <div class="type-selection">
+                <ion-anchor class={this.type === DemoType.MOBILE ? 'selected' : ''} onClick={() => this.switchType(DemoType.MOBILE)}>
                     <ion-label>Mobile</ion-label>
-                </ion-segment-button>
-                <ion-segment-button value="tablet" checked={this.type === DemoType.TABLET}>
+                </ion-anchor>
+                <ion-anchor class={this.type === DemoType.TABLET ? 'selected' : ''} onClick={() => this.switchType(DemoType.TABLET)}>
                     <ion-label>Tablet</ion-label>
-                </ion-segment-button>
-                <ion-segment-button value="desktop" checked={this.type === DemoType.DESKTOP}>
+                </ion-anchor>
+                <ion-anchor class={this.type === DemoType.DESKTOP ? 'selected' : ''} onClick={() => this.switchType(DemoType.DESKTOP)}>
                     <ion-label>Desktop</ion-label>
-                </ion-segment-button>
-                <ion-segment-button value="beamer" checked={this.type === DemoType.BEAMER}>
+                </ion-anchor>
+                <ion-anchor class={this.type === DemoType.BEAMER ? 'selected' : ''} onClick={() => this.switchType(DemoType.BEAMER)}>
                     <ion-label>Beamer</ion-label>
-                </ion-segment-button>
-            </ion-segment>
+                </ion-anchor>
+            </div>
 
             {this.renderMobile()}
             {this.renderTablet()}

studio/src/app/components/feed/app-popular/app-popular.scss

@@ -3,6 +3,8 @@ app-popular {
     --background: white;
     color: black;
     padding: 16px;
+
+    width: 350px;
   }
 
   ion-card.demo {