Auth/Passphrase icons

Summary: Better icon plan

Test Plan: Photoshop?

Reviewers: epriestley

Reviewed By: epriestley

CC: Korvin, epriestley, aran

Differential Revision: https://secure.phabricator.com/D7609

resources/sprite/manifest/apps-large.json

@@ -64,22 +64,22 @@
     "apps-authentication-blue-large"  : {
       "name" : "apps-authentication-blue-large",
       "rule" : ".apps-authentication-blue-large, .phabricator-crumb-view:hover .apps-authentication-dark-large",
-      "hash" : "9a8389120be19de5b0fba2814736d2c4"
+      "hash" : "3d5e35b539e11d69635d04651c973adf"
     },
     "apps-authentication-dark-large"  : {
       "name" : "apps-authentication-dark-large",
       "rule" : ".apps-authentication-dark-large",
-      "hash" : "478a7a1ae296ccf988ccce89bc7de25d"
+      "hash" : "2321ca8222a5368f80717c5424f3fd17"
     },
     "apps-authentication-light-large" : {
       "name" : "apps-authentication-light-large",
       "rule" : ".apps-authentication-light-large",
-      "hash" : "034256f1056033424b936e94debaa9ad"
+      "hash" : "8ec1778a94a9b17d22dec23e466077b3"
     },
     "apps-authentication-white-large" : {
       "name" : "apps-authentication-white-large",
       "rule" : ".apps-authentication-white-large",
-      "hash" : "29a681a8825dbeb805480bdddb91c737"
+      "hash" : "9ccbff0a913a20892846b0df6a502bbe"
     },
     "apps-calendar-blue-large"        : {
       "name" : "apps-calendar-blue-large",
@@ -621,6 +621,26 @@
       "rule" : ".apps-owners-white-large",
       "hash" : "a267ce517c928ce5861fe7ac85116af7"
     },
+    "apps-passphrase-blue-large"      : {
+      "name" : "apps-passphrase-blue-large",
+      "rule" : ".apps-passphrase-blue-large, .phabricator-crumb-view:hover .apps-passphrase-dark-large",
+      "hash" : "bb5ff2b25e5f7df50ec77ed4a5d38ea6"
+    },
+    "apps-passphrase-dark-large"      : {
+      "name" : "apps-passphrase-dark-large",
+      "rule" : ".apps-passphrase-dark-large",
+      "hash" : "8f5dea9e2e329a1d5001bbc8e739899c"
+    },
+    "apps-passphrase-light-large"     : {
+      "name" : "apps-passphrase-light-large",
+      "rule" : ".apps-passphrase-light-large",
+      "hash" : "b036bcd1cff87d5733fee676ae1d45c0"
+    },
+    "apps-passphrase-white-large"     : {
+      "name" : "apps-passphrase-white-large",
+      "rule" : ".apps-passphrase-white-large",
+      "hash" : "7c16e3be0fec2b107da1a770026e1155"
+    },
     "apps-paste-blue-large"           : {
       "name" : "apps-paste-blue-large",
       "rule" : ".apps-paste-blue-large, .phabricator-crumb-view:hover .apps-paste-dark-large",

resources/sprite/manifest/apps.json

@@ -34,12 +34,12 @@
     "apps-authentication-dark"  : {
       "name" : "apps-authentication-dark",
       "rule" : ".apps-authentication-dark",
-      "hash" : "5ae0f7e5d45df5da12ecc447f44bc7d9"
+      "hash" : "8616a1c5aeeeac1ce87376f2f0757439"
     },
     "apps-authentication-white" : {
       "name" : "apps-authentication-white",
       "rule" : ".apps-authentication-white",
-      "hash" : "567b1e8f11974b0817250b933b9dd3de"
+      "hash" : "9478fbaeee9e5cc44c4a5b483645caed"
     },
     "apps-calendar-dark"        : {
       "name" : "apps-calendar-dark",
@@ -311,6 +311,16 @@
       "rule" : ".apps-owners-white",
       "hash" : "7f409576c8ddab7a513313c301c61683"
     },
+    "apps-passphrase-dark"      : {
+      "name" : "apps-passphrase-dark",
+      "rule" : ".apps-passphrase-dark",
+      "hash" : "1ee5fc48415e60795f6f00422f72e170"
+    },
+    "apps-passphrase-white"     : {
+      "name" : "apps-passphrase-white",
+      "rule" : ".apps-passphrase-white",
+      "hash" : "a6dc3274fd093b0545937d6a495b391f"
+    },
     "apps-paste-dark"           : {
       "name" : "apps-paste-dark",
       "rule" : ".apps-paste-dark",

webroot/rsrc/css/sprite-apps-large.css

@@ -13,7 +13,7 @@ only screen and (min-device-pixel-ratio: 1.5),
 only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   .sprite-apps-large {
     background-image: url(/rsrc/image/sprite-apps-large-X2.png);
-    background-size: 435px 435px;
+    background-size: 435px 464px;
   }
 }
 
@@ -514,402 +514,418 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   background-position: -87px -232px;
 }
 
-.apps-paste-light-large {
+.apps-passphrase-light-large {
   background-position: -116px -232px;
 }
 
-.apps-paste-dark-large {
+.apps-passphrase-dark-large {
   background-position: -145px -232px;
 }
 
-.apps-paste-blue-large, .phabricator-crumb-view:hover .apps-paste-dark-large {
+.apps-passphrase-blue-large, .phabricator-crumb-view:hover .apps-passphrase-dark-large {
   background-position: -174px -232px;
 }
 
-.apps-paste-white-large {
+.apps-passphrase-white-large {
   background-position: -203px -232px;
 }
 
-.apps-people-light-large {
+.apps-paste-light-large {
   background-position: -232px -232px;
 }
 
-.apps-people-dark-large {
+.apps-paste-dark-large {
   background-position: -261px -232px;
 }
 
-.apps-people-blue-large, .phabricator-crumb-view:hover .apps-people-dark-large {
+.apps-paste-blue-large, .phabricator-crumb-view:hover .apps-paste-dark-large {
   background-position: -290px -232px;
 }
 
-.apps-people-white-large {
+.apps-paste-white-large {
   background-position: -319px -232px;
 }
 
-.apps-phage-light-large {
+.apps-people-light-large {
   background-position: -348px -232px;
 }
 
-.apps-phage-dark-large {
+.apps-people-dark-large {
   background-position: -377px -232px;
 }
 
-.apps-phage-blue-large, .phabricator-crumb-view:hover .apps-phage-dark-large {
+.apps-people-blue-large, .phabricator-crumb-view:hover .apps-people-dark-large {
   background-position: -406px -232px;
 }
 
-.apps-phage-white-large {
+.apps-people-white-large {
   background-position: 0px -261px;
 }
 
-.apps-phame-light-large {
+.apps-phage-light-large {
   background-position: -29px -261px;
 }
 
-.apps-phame-dark-large {
+.apps-phage-dark-large {
   background-position: -58px -261px;
 }
 
-.apps-phame-blue-large, .phabricator-crumb-view:hover .apps-phame-dark-large {
+.apps-phage-blue-large, .phabricator-crumb-view:hover .apps-phage-dark-large {
   background-position: -87px -261px;
 }
 
-.apps-phame-white-large {
+.apps-phage-white-large {
   background-position: -116px -261px;
 }
 
-.apps-phid-light-large {
+.apps-phame-light-large {
   background-position: -145px -261px;
 }
 
-.apps-phid-dark-large {
+.apps-phame-dark-large {
   background-position: -174px -261px;
 }
 
-.apps-phid-blue-large, .phabricator-crumb-view:hover .apps-phid-dark-large {
+.apps-phame-blue-large, .phabricator-crumb-view:hover .apps-phame-dark-large {
   background-position: -203px -261px;
 }
 
-.apps-phid-white-large {
+.apps-phame-white-large {
   background-position: -232px -261px;
 }
 
-.apps-phlux-light-large {
+.apps-phid-light-large {
   background-position: -261px -261px;
 }
 
-.apps-phlux-dark-large {
+.apps-phid-dark-large {
   background-position: -290px -261px;
 }
 
-.apps-phlux-blue-large, .phabricator-crumb-view:hover .apps-phlux-dark-large {
+.apps-phid-blue-large, .phabricator-crumb-view:hover .apps-phid-dark-large {
   background-position: -319px -261px;
 }
 
-.apps-phlux-white-large {
+.apps-phid-white-large {
   background-position: -348px -261px;
 }
 
-.apps-pholio-light-large {
+.apps-phlux-light-large {
   background-position: -377px -261px;
 }
 
-.apps-pholio-dark-large {
+.apps-phlux-dark-large {
   background-position: -406px -261px;
 }
 
-.apps-pholio-blue-large, .phabricator-crumb-view:hover .apps-pholio-dark-large {
+.apps-phlux-blue-large, .phabricator-crumb-view:hover .apps-phlux-dark-large {
   background-position: 0px -290px;
 }
 
-.apps-pholio-white-large {
+.apps-phlux-white-large {
   background-position: -29px -290px;
 }
 
-.apps-phortune-light-large {
+.apps-pholio-light-large {
   background-position: -58px -290px;
 }
 
-.apps-phortune-dark-large {
+.apps-pholio-dark-large {
   background-position: -87px -290px;
 }
 
-.apps-phortune-blue-large, .phabricator-crumb-view:hover .apps-phortune-dark-large {
+.apps-pholio-blue-large, .phabricator-crumb-view:hover .apps-pholio-dark-large {
   background-position: -116px -290px;
 }
 
-.apps-phortune-white-large {
+.apps-pholio-white-large {
   background-position: -145px -290px;
 }
 
-.apps-phpast-light-large {
+.apps-phortune-light-large {
   background-position: -174px -290px;
 }
 
-.apps-phpast-dark-large {
+.apps-phortune-dark-large {
   background-position: -203px -290px;
 }
 
-.apps-phpast-blue-large, .phabricator-crumb-view:hover .apps-phpast-dark-large {
+.apps-phortune-blue-large, .phabricator-crumb-view:hover .apps-phortune-dark-large {
   background-position: -232px -290px;
 }
 
-.apps-phpast-white-large {
+.apps-phortune-white-large {
   background-position: -261px -290px;
 }
 
-.apps-phrequent-light-large {
+.apps-phpast-light-large {
   background-position: -290px -290px;
 }
 
-.apps-phrequent-dark-large {
+.apps-phpast-dark-large {
   background-position: -319px -290px;
 }
 
-.apps-phrequent-blue-large, .phabricator-crumb-view:hover .apps-phrequent-dark-large {
+.apps-phpast-blue-large, .phabricator-crumb-view:hover .apps-phpast-dark-large {
   background-position: -348px -290px;
 }
 
-.apps-phrequent-white-large {
+.apps-phpast-white-large {
   background-position: -377px -290px;
 }
 
-.apps-phriction-light-large {
+.apps-phrequent-light-large {
   background-position: -406px -290px;
 }
 
-.apps-phriction-dark-large {
+.apps-phrequent-dark-large {
   background-position: 0px -319px;
 }
 
-.apps-phriction-blue-large, .phabricator-crumb-view:hover .apps-phriction-dark-large {
+.apps-phrequent-blue-large, .phabricator-crumb-view:hover .apps-phrequent-dark-large {
   background-position: -29px -319px;
 }
 
-.apps-phriction-white-large {
+.apps-phrequent-white-large {
   background-position: -58px -319px;
 }
 
-.apps-policy-light-large {
+.apps-phriction-light-large {
   background-position: -87px -319px;
 }
 
-.apps-policy-dark-large {
+.apps-phriction-dark-large {
   background-position: -116px -319px;
 }
 
-.apps-policy-blue-large, .phabricator-crumb-view:hover .apps-policy-dark-large {
+.apps-phriction-blue-large, .phabricator-crumb-view:hover .apps-phriction-dark-large {
   background-position: -145px -319px;
 }
 
-.apps-policy-white-large {
+.apps-phriction-white-large {
   background-position: -174px -319px;
 }
 
-.apps-ponder-light-large {
+.apps-policy-light-large {
   background-position: -203px -319px;
 }
 
-.apps-ponder-dark-large {
+.apps-policy-dark-large {
   background-position: -232px -319px;
 }
 
-.apps-ponder-blue-large, .phabricator-crumb-view:hover .apps-ponder-dark-large {
+.apps-policy-blue-large, .phabricator-crumb-view:hover .apps-policy-dark-large {
   background-position: -261px -319px;
 }
 
-.apps-ponder-white-large {
+.apps-policy-white-large {
   background-position: -290px -319px;
 }
 
-.apps-power-light-large {
+.apps-ponder-light-large {
   background-position: -319px -319px;
 }
 
-.apps-power-dark-large {
+.apps-ponder-dark-large {
   background-position: -348px -319px;
 }
 
-.apps-power-blue-large, .phabricator-crumb-view:hover .apps-power-dark-large {
+.apps-ponder-blue-large, .phabricator-crumb-view:hover .apps-ponder-dark-large {
   background-position: -377px -319px;
 }
 
-.apps-power-white-large {
+.apps-ponder-white-large {
   background-position: -406px -319px;
 }
 
-.apps-projects-light-large {
+.apps-power-light-large {
   background-position: 0px -348px;
 }
 
-.apps-projects-dark-large {
+.apps-power-dark-large {
   background-position: -29px -348px;
 }
 
-.apps-projects-blue-large, .phabricator-crumb-view:hover .apps-projects-dark-large {
+.apps-power-blue-large, .phabricator-crumb-view:hover .apps-power-dark-large {
   background-position: -58px -348px;
 }
 
-.apps-projects-white-large {
+.apps-power-white-large {
   background-position: -87px -348px;
 }
 
-.apps-releeph-light-large {
+.apps-projects-light-large {
   background-position: -116px -348px;
 }
 
-.apps-releeph-dark-large {
+.apps-projects-dark-large {
   background-position: -145px -348px;
 }
 
-.apps-releeph-blue-large, .phabricator-crumb-view:hover .apps-releeph-dark-large {
+.apps-projects-blue-large, .phabricator-crumb-view:hover .apps-projects-dark-large {
   background-position: -174px -348px;
 }
 
-.apps-releeph-white-large {
+.apps-projects-white-large {
   background-position: -203px -348px;
 }
 
-.apps-repositories-light-large {
+.apps-releeph-light-large {
   background-position: -232px -348px;
 }
 
-.apps-repositories-dark-large {
+.apps-releeph-dark-large {
   background-position: -261px -348px;
 }
 
-.apps-repositories-blue-large, .phabricator-crumb-view:hover .apps-repositories-dark-large {
+.apps-releeph-blue-large, .phabricator-crumb-view:hover .apps-releeph-dark-large {
   background-position: -290px -348px;
 }
 
-.apps-repositories-white-large {
+.apps-releeph-white-large {
   background-position: -319px -348px;
 }
 
-.apps-search-light-large {
+.apps-repositories-light-large {
   background-position: -348px -348px;
 }
 
-.apps-search-dark-large {
+.apps-repositories-dark-large {
   background-position: -377px -348px;
 }
 
-.apps-search-blue-large, .phabricator-crumb-view:hover .apps-search-dark-large {
+.apps-repositories-blue-large, .phabricator-crumb-view:hover .apps-repositories-dark-large {
   background-position: -406px -348px;
 }
 
-.apps-search-white-large {
+.apps-repositories-white-large {
   background-position: 0px -377px;
 }
 
-.apps-settings-light-large {
+.apps-search-light-large {
   background-position: -29px -377px;
 }
 
-.apps-settings-dark-large {
+.apps-search-dark-large {
   background-position: -58px -377px;
 }
 
-.apps-settings-blue-large, .phabricator-crumb-view:hover .apps-settings-dark-large {
+.apps-search-blue-large, .phabricator-crumb-view:hover .apps-search-dark-large {
   background-position: -87px -377px;
 }
 
-.apps-settings-white-large {
+.apps-search-white-large {
   background-position: -116px -377px;
 }
 
-.apps-setup-light-large {
+.apps-settings-light-large {
   background-position: -145px -377px;
 }
 
-.apps-setup-dark-large {
+.apps-settings-dark-large {
   background-position: -174px -377px;
 }
 
-.apps-setup-blue-large, .phabricator-crumb-view:hover .apps-setup-dark-large {
+.apps-settings-blue-large, .phabricator-crumb-view:hover .apps-settings-dark-large {
   background-position: -203px -377px;
 }
 
-.apps-setup-white-large {
+.apps-settings-white-large {
   background-position: -232px -377px;
 }
 
-.apps-slowvote-light-large {
+.apps-setup-light-large {
   background-position: -261px -377px;
 }
 
-.apps-slowvote-dark-large {
+.apps-setup-dark-large {
   background-position: -290px -377px;
 }
 
-.apps-slowvote-blue-large, .phabricator-crumb-view:hover .apps-slowvote-dark-large {
+.apps-setup-blue-large, .phabricator-crumb-view:hover .apps-setup-dark-large {
   background-position: -319px -377px;
 }
 
-.apps-slowvote-white-large {
+.apps-setup-white-large {
   background-position: -348px -377px;
 }
 
-.apps-token-light-large {
+.apps-slowvote-light-large {
   background-position: -377px -377px;
 }
 
-.apps-token-dark-large {
+.apps-slowvote-dark-large {
   background-position: -406px -377px;
 }
 
-.apps-token-blue-large, .phabricator-crumb-view:hover .apps-token-dark-large {
+.apps-slowvote-blue-large, .phabricator-crumb-view:hover .apps-slowvote-dark-large {
   background-position: 0px -406px;
 }
 
-.apps-token-white-large {
+.apps-slowvote-white-large {
   background-position: -29px -406px;
 }
 
-.apps-uiexamples-light-large {
+.apps-token-light-large {
   background-position: -58px -406px;
 }
 
-.apps-uiexamples-dark-large {
+.apps-token-dark-large {
   background-position: -87px -406px;
 }
 
-.apps-uiexamples-blue-large, .phabricator-crumb-view:hover .apps-uiexamples-dark-large {
+.apps-token-blue-large, .phabricator-crumb-view:hover .apps-token-dark-large {
   background-position: -116px -406px;
 }
 
-.apps-uiexamples-white-large {
+.apps-token-white-large {
   background-position: -145px -406px;
 }
 
-.apps-workphlow-light-large {
+.apps-uiexamples-light-large {
   background-position: -174px -406px;
 }
 
-.apps-workphlow-dark-large {
+.apps-uiexamples-dark-large {
   background-position: -203px -406px;
 }
 
-.apps-workphlow-blue-large, .phabricator-crumb-view:hover .apps-workphlow-dark-large {
+.apps-uiexamples-blue-large, .phabricator-crumb-view:hover .apps-uiexamples-dark-large {
   background-position: -232px -406px;
 }
 
-.apps-workphlow-white-large {
+.apps-uiexamples-white-large {
   background-position: -261px -406px;
 }
 
-.apps-xhprof-light-large {
+.apps-workphlow-light-large {
   background-position: -290px -406px;
 }
 
-.apps-xhprof-dark-large {
+.apps-workphlow-dark-large {
   background-position: -319px -406px;
 }
 
-.apps-xhprof-blue-large, .phabricator-crumb-view:hover .apps-xhprof-dark-large {
+.apps-workphlow-blue-large, .phabricator-crumb-view:hover .apps-workphlow-dark-large {
   background-position: -348px -406px;
 }
 
-.apps-xhprof-white-large {
+.apps-workphlow-white-large {
   background-position: -377px -406px;
 }
+
+.apps-xhprof-light-large {
+  background-position: -406px -406px;
+}
+
+.apps-xhprof-dark-large {
+  background-position: 0px -435px;
+}
+
+.apps-xhprof-blue-large, .phabricator-crumb-view:hover .apps-xhprof-dark-large {
+  background-position: -29px -435px;
+}
+
+.apps-xhprof-white-large {
+  background-position: -58px -435px;
+}

webroot/rsrc/css/sprite-apps.css

@@ -147,122 +147,130 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
 }
 
 .apps-files-dark {
-  background-position: 0px -45px;
+  background-position: -150px -30px;
 }
 
 .apps-files-white {
-  background-position: -15px -45px;
+  background-position: 0px -45px;
 }
 
 .apps-flags-dark {
-  background-position: -30px -45px;
+  background-position: -15px -45px;
 }
 
 .apps-flags-white {
-  background-position: -45px -45px;
+  background-position: -30px -45px;
 }
 
 .apps-harbormaster-dark {
-  background-position: -60px -45px;
+  background-position: -45px -45px;
 }
 
 .apps-harbormaster-white {
-  background-position: -75px -45px;
+  background-position: -60px -45px;
 }
 
 .apps-help-dark {
-  background-position: -90px -45px;
+  background-position: -75px -45px;
 }
 
 .apps-help-white {
-  background-position: -105px -45px;
+  background-position: -90px -45px;
 }
 
 .apps-herald-dark {
-  background-position: -120px -45px;
+  background-position: -105px -45px;
 }
 
 .apps-herald-white {
-  background-position: -135px -45px;
+  background-position: -120px -45px;
 }
 
 .apps-home-dark {
-  background-position: 0px -60px;
+  background-position: -135px -45px;
 }
 
 .apps-home-white {
-  background-position: -15px -60px;
+  background-position: -150px -45px;
 }
 
 .apps-legalpad-dark {
-  background-position: -30px -60px;
+  background-position: 0px -60px;
 }
 
 .apps-legalpad-white {
-  background-position: -45px -60px;
+  background-position: -15px -60px;
 }
 
 .apps-logo-dark {
-  background-position: -60px -60px;
+  background-position: -30px -60px;
 }
 
 .apps-logo-white {
-  background-position: -75px -60px;
+  background-position: -45px -60px;
 }
 
 .apps-macro-dark {
-  background-position: -90px -60px;
+  background-position: -60px -60px;
 }
 
 .apps-macro-white {
-  background-position: -105px -60px;
+  background-position: -75px -60px;
 }
 
 .apps-mail-dark {
-  background-position: -120px -60px;
+  background-position: -90px -60px;
 }
 
 .apps-mail-white {
-  background-position: -135px -60px;
+  background-position: -105px -60px;
 }
 
 .apps-maniphest-dark {
-  background-position: 0px -75px;
+  background-position: -120px -60px;
 }
 
 .apps-maniphest-white {
-  background-position: -15px -75px;
+  background-position: -135px -60px;
 }
 
 .apps-metamta-dark {
-  background-position: -30px -75px;
+  background-position: 0px -75px;
 }
 
 .apps-metamta-white {
-  background-position: -45px -75px;
+  background-position: -15px -75px;
 }
 
 .apps-new-dark {
-  background-position: -60px -75px;
+  background-position: -30px -75px;
 }
 
 .apps-new-white {
-  background-position: -75px -75px;
+  background-position: -45px -75px;
 }
 
 .apps-nuance-dark {
-  background-position: -90px -75px;
+  background-position: -60px -75px;
 }
 
 .apps-nuance-white {
-  background-position: -105px -75px;
+  background-position: -75px -75px;
 }
 
 .apps-owners-dark {
-  background-position: -120px -75px;
+  background-position: -90px -75px;
 }
 
 .apps-owners-white {
+  background-position: -105px -75px;
+}
+
+.apps-passphrase-dark {
+  background-position: -120px -75px;
+}
+
+.apps-passphrase-white {
   background-position: -135px -75px;
 }