From 88dc19c543ac861b6e4378d719f26d4361299057 Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Fri, 19 Aug 2016 12:55:27 +0200
Subject: [PATCH] add more modals

---
 src/scss/cdb-components/modals.scss | 84 +++++++++++++++++++++++++++--
 1 file changed, 80 insertions(+), 4 deletions(-)

diff --git a/src/scss/cdb-components/modals.scss b/src/scss/cdb-components/modals.scss
index 48e2c32..f108422 100644
--- a/src/scss/cdb-components/modals.scss
+++ b/src/scss/cdb-components/modals.scss
@@ -290,7 +290,7 @@
           </li>
           <li class="Modal-listTextItem u-flex u-alignCenter">
             <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">2</div>
-            <p class="CDB-Text CDB-Size-medium">Be sure you have <span class="Modal-listTextCode">.cartodb-popup</span> and <span class="Modal-listTextCode">close</span> elements. They are needed for basic interactions.</p>
+            <p class="CDB-Text CDB-Size-medium">Be sure you have <span class="Modal-listTextHighlight is-code">.cartodb-popup</span> and <span class="Modal-listTextHighlight is-code">close</span> elements. They are needed for basic interactions.</p>
           </li>
           <li class="Modal-listTextItem u-flex u-alignCenter">
             <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">3</div>
@@ -311,11 +311,14 @@
 ```
 */
 
-.Modal-listTextCode {
+.Modal-listTextHighlight {
   display: inline-block;
   padding: 4px 5px;
   border-radius: 2px;
   background: $cThirdBackground;
+}
+
+.Modal-listTextHighlight.is-code {
   font: 500 12px 'Monaco', 'Monospace';
 }
 
@@ -414,8 +417,8 @@
         </svg>
       </div>
       <div>
-        <h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Sync Table options</h2>
-        <p class="CDB-Text CDB-Size-medium u-altTextColor">Your table is in Sync with a Google Drive file: Accidents.csv.</p>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Export dataset</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">All datasets will be compressed in a single file</p>
         <div class="Modal-listTextItem u-flex u-alignCenter">
           <h3 class="CDB-Text CDB-Size-small is-semibold u-upperCase">Select format</h3>
           <ul class="Modal-listForm u-flex u-alignCenter CDB-Text CDB-Size-small">
@@ -642,4 +645,77 @@
 }
 
 
+/* SG
+# Modals/Mod Error Creating Table Steps
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        <svg width="24px" height="24px" viewBox="521 436 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <g id="Smiley-red" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(521.000000, 436.000000)">
+                <path d="M12,13.797 C9.069,13.797 6.478,15.286 5.07,17.781 C4.934,18.022 5.019,18.327 5.26,18.463 C5.338,18.507 5.422,18.527 5.505,18.527 C5.679,18.527 5.849,18.435 5.941,18.273 C7.169,16.096 9.434,14.796 12,14.796 C14.658,14.796 16.943,16.087 18.114,18.249 C18.245,18.492 18.55,18.582 18.792,18.45 C19.035,18.319 19.125,18.015 18.993,17.772 C17.645,15.283 15.031,13.797 12,13.797 L12,13.797 Z" id="Shape" fill="#F15743"></path>
+                <path d="M7.25,10.5 C8.353,10.5 9.25,9.603 9.25,8.5 C9.25,7.397 8.353,6.5 7.25,6.5 C6.147,6.5 5.25,7.397 5.25,8.5 C5.25,9.603 6.147,10.5 7.25,10.5 L7.25,10.5 Z M7.25,7.5 C7.801,7.5 8.25,7.948 8.25,8.5 C8.25,9.052 7.801,9.5 7.25,9.5 C6.699,9.5 6.25,9.052 6.25,8.5 C6.25,7.948 6.699,7.5 7.25,7.5 L7.25,7.5 Z" id="Shape" fill="#F15743"></path>
+                <path d="M16.25,10.5 C17.353,10.5 18.25,9.603 18.25,8.5 C18.25,7.397 17.353,6.5 16.25,6.5 C15.147,6.5 14.25,7.397 14.25,8.5 C14.25,9.603 15.147,10.5 16.25,10.5 L16.25,10.5 Z M16.25,7.5 C16.801,7.5 17.25,7.948 17.25,8.5 C17.25,9.052 16.801,9.5 16.25,9.5 C15.699,9.5 15.25,9.052 15.25,8.5 C15.25,7.948 15.699,7.5 16.25,7.5 L16.25,7.5 Z" id="Shape" fill="#F15743"></path>
+                <path d="M12,0 C5.383,0 0,5.383 0,12 C0,18.617 5.383,24 12,24 C18.617,24 24,18.617 24,12 C24,5.383 18.617,0 12,0 L12,0 Z M12,23 C5.935,23 1,18.065 1,12 C1,5.935 5.935,1 12,1 C18.065,1 23,5.935 23,12 C23,18.065 18.065,23 12,23 L12,23 Z" id="Shape" fill="#F15743"></path>
+            </g>
+        </svg>
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-errorTextColor u-bSpace--m">Error creating table from SQL query (8003)</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">Don’t panic, follow these steps</p>
+        <ul class="Modal-listText">
+          <li class="Modal-listTextItem u-flex u-alignCenter">
+            <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
+            <p class="CDB-Text CDB-Size-medium">Your dataset appears broken. Double check that all the necessary parts of the dataset are correctly setted up.</p>
+          </li>
+          <li class="Modal-listTextItem u-flex u-alignCenter">
+            <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">2</div>
+            <p class="CDB-Text CDB-Size-medium">Your dataset appears broken. Double check that all the necessary parts of the dataset are correctly setted up. <span class="Modal-listTextHighlight CDB-Text CDB-Size-small">f9736a7394-3984-3edo-85jrndi4333344e <a href=#" class="u-lSpace">SEND CODE</a></span></p>
+          </li>
+        </ul>
+        <ul class="Modal-listActions u-flex u-alignCenter">
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--primary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">GO BACK</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+  </div>
+```
+*/
+
+
+/* SG
+# Modals/Correctly Generated Image
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        <svg width="24px" height="24px" viewBox="504 400 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <g id="Smiley-black" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(504.000000, 400.000000)">
+            <path d="M12,13.797 C9.069,13.797 6.478,15.286 5.07,17.781 C4.934,18.022 5.019,18.327 5.26,18.463 C5.338,18.507 5.422,18.527 5.505,18.527 C5.679,18.527 5.849,18.435 5.941,18.273 C7.169,16.096 9.434,14.796 12,14.796 C14.658,14.796 16.943,16.087 18.114,18.249 C18.245,18.492 18.55,18.582 18.792,18.45 C19.035,18.319 19.125,18.015 18.993,17.772 C17.645,15.283 15.031,13.797 12,13.797 L12,13.797 Z" id="Shape" fill="#2E3C43" transform="translate(12.029506, 16.162000) scale(1, -1) translate(-12.029506, -16.162000) "></path>
+            <path d="M7.25,10.5 C8.353,10.5 9.25,9.603 9.25,8.5 C9.25,7.397 8.353,6.5 7.25,6.5 C6.147,6.5 5.25,7.397 5.25,8.5 C5.25,9.603 6.147,10.5 7.25,10.5 L7.25,10.5 Z M7.25,7.5 C7.801,7.5 8.25,7.948 8.25,8.5 C8.25,9.052 7.801,9.5 7.25,9.5 C6.699,9.5 6.25,9.052 6.25,8.5 C6.25,7.948 6.699,7.5 7.25,7.5 L7.25,7.5 Z" id="Shape" fill="#2E3C43"></path>
+            <path d="M16.25,10.5 C17.353,10.5 18.25,9.603 18.25,8.5 C18.25,7.397 17.353,6.5 16.25,6.5 C15.147,6.5 14.25,7.397 14.25,8.5 C14.25,9.603 15.147,10.5 16.25,10.5 L16.25,10.5 Z M16.25,7.5 C16.801,7.5 17.25,7.948 17.25,8.5 C17.25,9.052 16.801,9.5 16.25,9.5 C15.699,9.5 15.25,9.052 15.25,8.5 C15.25,7.948 15.699,7.5 16.25,7.5 L16.25,7.5 Z" id="Shape" fill="#2E3C43"></path>
+            <path d="M12,0 C5.383,0 0,5.383 0,12 C0,18.617 5.383,24 12,24 C18.617,24 24,18.617 24,12 C24,5.383 18.617,0 12,0 L12,0 Z M12,23 C5.935,23 1,18.065 1,12 C1,5.935 5.935,1 12,1 C18.065,1 23,5.935 23,12 C23,18.065 18.065,23 12,23 L12,23 Z" id="Shape" fill="#2E3C43"></path>
+          </g>
+        </svg>
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Your image has been generated correctly</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">You can use download your image in the following link <a href="#">http://saleiva.carto.com/images/super-image.2023131.a.png</a></p>
+        <div class="Modal-listActions u-flex u-alignCenter">
+          <div class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">DONE</span>
+            </button>
+          </div>
+        </div>
+      </div>
+  </div>
+```
+*/
+