feat(add-user-interface): rearrange card position

views/index.html

@@ -58,75 +58,75 @@
         </div>
     </div>
 
-    <div class="ui four cards">
-        <div class="green card">
+    <div class="ui three cards">
+        <div class="green card" @click="sendMessageModal" style="cursor: pointer">
             <div class="content">
-                <div class="header">User Info</div>
+                <div class="header">Send Message (Text)</div>
                 <div class="meta">App</div>
                 <div class="description">
-                    You can search someone user info by phone
+                    Send any message to any
+                    <div class="ui blue horizontal label">indonesian</div>
+                    whatsapp number
                 </div>
             </div>
         </div>
-        <div class="green card">
+        <div class="green card" @click="sendImageModal" style="cursor:pointer;">
             <div class="content">
-                <div class="header">User Avatar</div>
+                <div class="header">Send Message (Image)</div>
                 <div class="meta">App</div>
                 <div class="description">
-                    You can search someone avatar by phone
+                    Send image with
+                    <div class="ui blue horizontal label">jpg/jpeg/png</div>
+                    type
                 </div>
             </div>
         </div>
-        <div class="green card" @click="groupModal" style="cursor: pointer">
+        <div class="green card" @click="sendFileModal" style="cursor: pointer">
             <div class="content">
-                <div class="header">User List Groups</div>
+                <div class="header">Send Message (File)</div>
                 <div class="meta">App</div>
                 <div class="description">
-                    Display all groups you joined
+                    Send any file up to
+                    <div class="ui blue horizontal label">10MB</div>
                 </div>
             </div>
         </div>
-        <div class="green card" @click="privacyModal" style="cursor: pointer">
+    </div>
+
+    <div class="ui four cards">
+        <div class="green card">
             <div class="content">
-                <div class="header">User Privacy Setting</div>
+                <div class="header">User Info</div>
                 <div class="meta">App</div>
                 <div class="description">
-                    Get your privacy settings
+                    You can search someone user info by phone
                 </div>
             </div>
         </div>
-    </div>
-
-    <div class="ui three cards">
-        <div class="green card" @click="sendMessageModal" style="cursor: pointer">
+        <div class="green card">
             <div class="content">
-                <div class="header">Send Message (Text)</div>
+                <div class="header">User Avatar</div>
                 <div class="meta">App</div>
                 <div class="description">
-                    Send any message to any
-                    <div class="ui blue horizontal label">indonesian</div>
-                    whatsapp number
+                    You can search someone avatar by phone
                 </div>
             </div>
         </div>
-        <div class="green card" @click="sendImageModal" style="cursor:pointer;">
+        <div class="green card" @click="groupModal" style="cursor: pointer">
             <div class="content">
-                <div class="header">Send Message (Image)</div>
+                <div class="header">User List Groups</div>
                 <div class="meta">App</div>
                 <div class="description">
-                    Send image with
-                    <div class="ui blue horizontal label">jpg/jpeg/png</div>
-                    type
+                    Display all groups you joined
                 </div>
             </div>
         </div>
-        <div class="green card" @click="sendFileModal" style="cursor: pointer">
+        <div class="green card" @click="privacyModal" style="cursor: pointer">
             <div class="content">
-                <div class="header">Send Message (File)</div>
+                <div class="header">User Privacy Setting</div>
                 <div class="meta">App</div>
                 <div class="description">
-                    Send any file up to
-                    <div class="ui blue horizontal label">10MB</div>
+                    Get your privacy settings
                 </div>
             </div>
         </div>