diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 64a9dbe77..19fc549f6 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -434,6 +434,9 @@ "beCareful": { "message": "Be careful" }, + "beta": { + "message": "Beta" + }, "betaMetamaskDescription": { "message": "Trusted by millions, MetaMask is a secure wallet making the world of web3 accessible to all." }, diff --git a/app/build-types/beta/images/beta-mascot.json b/app/build-types/beta/images/beta-mascot.json deleted file mode 100644 index 4db57f543..000000000 --- a/app/build-types/beta/images/beta-mascot.json +++ /dev/null @@ -1,830 +0,0 @@ -{ - "chunks": [ - { - "faces": [ - [0, 1, 2], - [2, 3, 0], - [4, 5, 2], - [6, 3, 2], - [2, 5, 6], - [7, 8, 9], - [10, 3, 6], - [10, 50, 7], - [7, 3, 10], - [7, 9, 3], - [49, 0, 9], - [3, 9, 0], - [2, 1, 4] - ], - "name": "left ear", - "gradient": "left-ear-gradient" - }, - { - "faces": [ - [53, 54, 55], - [55, 56, 53], - [57, 56, 55], - [58, 59, 55], - [55, 54, 58], - [60, 61, 62], - [63, 58, 54], - [63, 60, 89], - [60, 63, 54], - [60, 54, 61], - [88, 61, 53], - [54, 53, 61], - [55, 59, 57] - ], - "name": "right ear", - "gradient": "right-ear-gradient" - }, - { - "color": [22, 22, 22], - "faces": [[11, 12, 13]], - "name": "left eye" - }, - { - "color": [22, 22, 22], - "faces": [[64, 65, 66]], - "name": "right eye" - }, - { - "faces": [ - [14, 15, 11], - [11, 16, 14] - ], - "name": "left inner eye", - "gradient": "left-inner-eye-gradient" - }, - { - "faces": [[17, 12, 18]], - "name": "left outer eye", - "gradient": "left-outer-eye-gradient" - }, - { - "faces": [[41, 64, 37]], - "name": "right lower inner eye", - "gradient": "right-inner-eye-gradient" - }, - { - "faces": [[67, 68, 66]], - "name": "right outer eye", - "gradient": "right-outer-eye-gradient" - }, - { - "color": [192, 173, 158], - "faces": [ - [19, 20, 21], - [21, 22, 19], - [20, 19, 23], - [23, 24, 20], - [23, 25, 24], - [19, 22, 26], - [26, 27, 19], - [23, 28, 29], - [23, 29, 30], - [25, 23, 30], - [29, 51, 52], - [52, 30, 29], - [27, 26, 69], - [69, 70, 27], - [70, 71, 72], - [72, 27, 70], - [72, 71, 73], - [51, 74, 72], - [52, 51, 72], - [73, 52, 72], - [19, 27, 74], - [74, 28, 19], - [51, 29, 28], - [28, 74, 51], - [74, 27, 72], - [28, 23, 19] - ], - "name": "lower chin" - }, - { - "color": [215, 193, 179], - "faces": [ - [21, 20, 24], - [24, 31, 21] - ], - "name": "left lower snout" - }, - { - "color": [215, 193, 179], - "faces": [ - [69, 71, 70], - [71, 69, 75] - ], - "name": "right lower snout" - }, - { - "faces": [[31, 24, 18]], - "name": "left upper snout", - "gradient": "left-upper-snout-gradient" - }, - { - "faces": [ - [6, 5, 16], - [16, 17, 6] - ], - "name": "left forehead", - "gradient": "left-forehead-gradient" - }, - { - "faces": [ - [24, 32, 33], - [33, 34, 24] - ], - "name": "left lower cheek", - "gradient": "left-lower-cheek-gradient" - }, - { - "faces": [[5, 4, 35]], - "name": "left top ear", - "gradient": "left-top-ear-gradient" - }, - { - "faces": [[75, 68, 71]], - "name": "right upper snout", - "gradient": "right-upper-snout-gradient" - }, - { - "faces": [ - [58, 67, 40], - [40, 59, 58] - ], - "name": "right forhead", - "gradient": "right-forehead-gradient" - }, - { - "faces": [ - [71, 76, 77], - [77, 78, 71] - ], - "name": "right lower cheek", - "gradient": "right-lower-cheek-gradient" - }, - { - "faces": [[24, 34, 18]], - "name": "left middle cheek", - "gradient": "left-middle-cheek-gradient" - }, - { - "color": [35, 151, 119], - "faces": [ - [16, 13, 12], - [12, 17, 16], - [13, 16, 11] - ], - "name": "left above eye" - }, - { - "faces": [[71, 68, 76]], - "name": "right middle cheek", - "gradient": "right-middle-cheek-gradient" - }, - { - "color": [35, 151, 119], - "faces": [ - [40, 67, 66], - [66, 65, 40], - [65, 64, 40] - ], - "name": "right above eye" - }, - { - "color": [22, 22, 22], - "faces": [ - [36, 15, 37], - [37, 38, 36], - [31, 39, 22], - [22, 21, 31], - [31, 15, 36], - [36, 39, 31], - [75, 69, 26], - [26, 80, 75], - [75, 80, 38], - [38, 37, 75], - [38, 80, 39], - [39, 36, 38], - [39, 80, 26], - [26, 22, 39] - ], - "name": "nose" - }, - { - "faces": [ - [17, 33, 10], - [17, 18, 34], - [34, 33, 17], - [10, 6, 17] - ], - "name": "left upper cheek", - "gradient": "left-upper-cheek-gradient" - }, - { - "faces": [ - [11, 15, 31], - [31, 18, 11], - [18, 12, 11] - ], - "name": "left below eye", - "gradient": "left-below-eye-gradient" - }, - { - "faces": [ - [14, 16, 40], - [40, 41, 14], - [59, 5, 35], - [35, 79, 59], - [14, 41, 37], - [37, 15, 14], - [5, 59, 40], - [40, 16, 5] - ], - "name": "forehead", - "gradient": "forehead-gradient" - }, - { - "faces": [ - [67, 63, 77], - [67, 77, 76], - [76, 68, 67], - [63, 67, 58] - ], - "name": "right upper cheek", - "gradient": "right-upper-cheek-gradient" - }, - { - "faces": [ - [64, 68, 75], - [75, 37, 64], - [68, 64, 66] - ], - "name": "right below eye", - "gradient": "right-below-eye-gradient" - }, - { - "faces": [ - [35, 4, 42], - [4, 1, 42], - [42, 43, 44], - [44, 35, 42], - [45, 43, 42], - [42, 10, 45], - [30, 32, 24], - [24, 25, 30], - [30, 33, 32], - [33, 30, 10], - [44, 43, 46], - [43, 45, 47], - [47, 46, 43], - [48, 47, 45], - [45, 30, 48], - [30, 45, 10], - [49, 42, 0], - [8, 7, 42], - [50, 42, 7], - [50, 10, 42], - [1, 0, 42], - [42, 9, 8], - [42, 49, 9], - [79, 81, 57], - [57, 81, 56], - [82, 79, 35], - [35, 44, 82], - [81, 79, 82], - [82, 83, 81], - [84, 63, 81], - [81, 83, 84], - [44, 46, 85], - [85, 82, 44], - [52, 73, 71], - [71, 78, 52], - [52, 78, 77], - [77, 63, 52], - [82, 85, 83], - [83, 85, 86], - [86, 84, 83], - [87, 52, 84], - [84, 86, 87], - [52, 63, 84], - [88, 53, 81], - [62, 81, 60], - [89, 60, 81], - [89, 81, 63], - [56, 81, 53], - [81, 62, 61], - [81, 61, 88], - [48, 87, 86], - [86, 47, 48], - [47, 86, 85], - [85, 46, 47], - [48, 30, 52], - [52, 87, 48] - ], - "name": "back", - "gradient": "back-gradient" - }, - { - "faces": [[57, 59, 79]], - "name": "right top ear", - "gradient": "right-top-ear-gradient" - }, - { - "faces": [[64, 41, 40]], - "name": "right inner upper eye", - "gradient": "right-inner-eye-gradient" - } - ], - "gradients": { - "forehead-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#23FE4A" - }, - { - "offset": 1, - "stop-color": "#BAD8EF" - } - ], - "x1": "50%", - "y1": "20.232164948453608%", - "x2": "50%", - "y2": "74.87123711340206%", - "gradientUnits": "userSpaceOnUse" - }, - "right-upper-cheek-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#20B475" - }, - { - "offset": 1, - "stop-color": "#70BDCE" - } - ], - "x1": "77.19501199040768%", - "y1": "44.68123711340206%", - "x2": "77.19501199040768%", - "y2": "68.2861855670103%", - "gradientUnits": "userSpaceOnUse" - }, - "left-upper-cheek-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#20B475" - }, - { - "offset": 1, - "stop-color": "#70BDCE" - } - ], - "x1": "22.820719424460435%", - "y1": "44.68123711340206%", - "x2": "22.820719424460435%", - "y2": "68.2861855670103%", - "gradientUnits": "userSpaceOnUse" - }, - "right-below-eye-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#85BBE1" - }, - { - "offset": 1, - "stop-color": "#7CCACA" - } - ], - "x1": "54.34676258992806%", - "y1": "68.26917525773197%", - "x2": "65.3001438848921%", - "y2": "68.26917525773197%", - "gradientUnits": "userSpaceOnUse" - }, - "left-below-eye-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#7CCACA" - }, - { - "offset": 1, - "stop-color": "#85BBE1" - } - ], - "x1": "34.731223021582736%", - "y1": "68.26917525773197%", - "x2": "45.65323741007194%", - "y2": "68.26917525773197%", - "gradientUnits": "userSpaceOnUse" - }, - "right-ear-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#074F1E" - }, - { - "offset": 0.4286, - "stop-color": "#05541C" - }, - { - "offset": 0.62, - "stop-color": "#006A13" - }, - { - "offset": 1, - "stop-color": "#007514" - } - ], - "x1": "61.443549160671466%", - "y1": "44.51773195876289%", - "x2": "93.802206235012%", - "y2": "24.439072164948456%", - "gradientUnits": "userSpaceOnUse" - }, - "left-ear-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#074F1E" - }, - { - "offset": 0.4286, - "stop-color": "#05541C" - }, - { - "offset": 0.62, - "stop-color": "#006A13" - }, - { - "offset": 1, - "stop-color": "#007514" - } - ], - "x1": "32.7432134292566%", - "y1": "44.33329896907217%", - "x2": "4.853390887290168%", - "y2": "19.18181443298969%", - "gradientUnits": "userSpaceOnUse" - }, - "left-outer-eye-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#43C3A2" - }, - { - "offset": 1, - "stop-color": "#4FAFC0" - }, - { - "offset": 1, - "stop-color": "#4FAFC0" - } - ], - "x1": "27.575539568345324%", - "y1": "60.519278350515464%", - "x2": "34.982350119904076%", - "y2": "60.519278350515464%", - "gradientUnits": "userSpaceOnUse" - }, - "right-outer-eye-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#4FAFC0" - }, - { - "offset": 1, - "stop-color": "#43C3A2" - } - ], - "x1": "65.01764988009592%", - "y1": "60.519278350515464%", - "x2": "72.42446043165468%", - "y2": "60.519278350515464%", - "gradientUnits": "userSpaceOnUse" - }, - "right-lower-cheek-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#59ADCB" - }, - { - "offset": 1, - "stop-color": "#436CC8" - } - ], - "x1": "77.93247002398083%", - "y1": "68.15113402061857%", - "x2": "77.93247002398083%", - "y2": "86.82577319587631%", - "gradientUnits": "userSpaceOnUse" - }, - "left-lower-cheek-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#59ADCB" - }, - { - "offset": 1, - "stop-color": "#436CC8" - } - ], - "x1": "22.083165467625896%", - "y1": "68.15113402061857%", - "x2": "22.083165467625896%", - "y2": "86.82577319587631%", - "gradientUnits": "userSpaceOnUse" - }, - "left-top-ear-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#0ED54A" - }, - { - "offset": 1, - "stop-color": "#0ED54A" - } - ], - "x1": "13.954513189448441%", - "y1": "22.055670103092787%", - "x2": "44.146762589928066%", - "y2": "22.055670103092787%", - "gradientUnits": "userSpaceOnUse" - }, - "right-top-ear-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#0ED54A" - }, - { - "offset": 1, - "stop-color": "#11EB36" - } - ], - "x1": "55.85333333333334%", - "y1": "22.055670103092787%", - "x2": "86.04556354916068%", - "y2": "22.055670103092787%", - "gradientUnits": "userSpaceOnUse" - }, - "left-forehead-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#15DC5D" - }, - { - "offset": 1, - "stop-color": "#48CA9F" - } - ], - "x1": "36.3947242206235%", - "y1": "34.11144329896908%", - "x2": "36.3947242206235%", - "y2": "53.59649484536083%", - "gradientUnits": "userSpaceOnUse" - }, - "right-forehead-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#15DC5D" - }, - { - "offset": 1, - "stop-color": "#48CA9F" - } - ], - "x1": "63.6052757793765%", - "y1": "34.11144329896908%", - "x2": "63.6052757793765%", - "y2": "53.59649484536083%", - "gradientUnits": "userSpaceOnUse" - }, - "left-upper-snout-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#54A8CF" - }, - { - "offset": 1, - "stop-color": "#5393E3" - } - ], - "x1": "38.829736211031175%", - "y1": "68.28865979381443%", - "x2": "38.829736211031175%", - "y2": "81.55670103092784%", - "gradientUnits": "userSpaceOnUse" - }, - "right-upper-snout-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#54A8CF" - }, - { - "offset": 1, - "stop-color": "#5393E3" - } - ], - "x1": "61.17026378896883%", - "y1": "68.28865979381443%", - "x2": "61.17026378896883%", - "y2": "81.55670103092784%", - "gradientUnits": "userSpaceOnUse" - }, - "right-middle-cheek-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#32819D" - }, - { - "offset": 0.3363, - "stop-color": "#447DCD" - } - ], - "x1": "69.9137649880096%", - "y1": "51.063505154639174%", - "x2": "69.9137649880096%", - "y2": "85.81041237113402%", - "gradientUnits": "userSpaceOnUse" - }, - "left-middle-cheek-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#32819D" - }, - { - "offset": 0.3363, - "stop-color": "#447DCD" - } - ], - "x1": "30.086330935251798%", - "y1": "68.15092783505153%", - "x2": "30.086330935251798%", - "y2": "81.55752577319588%", - "gradientUnits": "userSpaceOnUse" - }, - "right-inner-eye-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#53A9CB" - }, - { - "offset": 1, - "stop-color": "#44C0A6" - } - ], - "x1": "55.38244604316547%", - "y1": "74.87123711340206%", - "x2": "55.38244604316547%", - "y2": "53.59659793814433%", - "gradientUnits": "userSpaceOnUse" - }, - "left-inner-eye-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#53A9CB" - }, - { - "offset": 1, - "stop-color": "#44C0A6" - } - ], - "x1": "43.58177458033573%", - "y1": "64.2339175257732%", - "x2": "45.65323741007194%", - "y2": "64.2339175257732%", - "gradientUnits": "userSpaceOnUse" - }, - "back-gradient": { - "type": "linear", - "stops": [ - { - "stop-color": "#27FC4E" - }, - { - "offset": 1, - "stop-color": "#446FC9" - } - ], - "x1": "50%", - "y1": "0%", - "x2": "50%", - "y2": "100%", - "gradientUnits": "userSpaceOnUse" - } - }, - "positions": [ - [111.024597, 52.604599, 46.225899], - [114.025002, 87.673302, 58.9818], - [66.192001, 80.898003, 55.394299], - [72.113297, 35.491798, 30.871401], - [97.804497, 116.560997, 73.978798], - [16.7623, 58.010899, 58.078201], - [52.608898, 30.3641, 42.556099], - [106.881401, 31.945499, 46.9133], - [113.484596, 38.6049, 49.121498], - [108.6633, 43.2332, 46.315399], - [101.216599, 15.9822, 46.308201], - [16.6605, -16.2883, 93.618698], - [40.775002, -10.2288, 85.276398], - [23.926901, -2.5103, 86.736504], - [11.1691, -7.0037, 99.377602], - [9.5692, -34.393902, 141.671997], - [12.596, 7.1655, 88.740997], - [61.180901, 8.8142, 76.996803], - [39.719501, -28.927099, 88.963799], - [13.7962, -68.575699, 132.057007], - [15.2674, -62.32, 129.688004], - [14.8446, -52.6096, 140.113007], - [12.8917, -49.771599, 144.740997], - [35.604198, -71.758003, 81.063904], - [47.462502, -68.606102, 63.369701], - [38.2486, -64.730202, 38.909901], - [-12.8917, -49.771599, 144.740997], - [-13.7962, -68.575699, 132.057007], - [17.802099, -71.758003, 81.063904], - [19.1243, -69.0168, 49.420101], - [38.2486, -66.275597, 17.776199], - [12.8928, -36.703499, 141.671997], - [109.283997, -93.589897, 27.824301], - [122.117996, -36.8894, 35.025002], - [67.7668, -30.197001, 78.417801], - [33.180698, 101.851997, 25.3186], - [9.4063, -35.589802, 150.722], - [-9.5692, -34.393902, 141.671997], - [-9.4063, -35.589802, 150.722], - [11.4565, -37.899399, 150.722], - [-12.596, 7.1655, 88.740997], - [-11.1691, -7.0037, 99.377602], - [70.236504, 62.836201, -3.9475], - [47.263401, 54.293999, -27.414801], - [28.7302, 91.731102, -24.972601], - [69.167603, 6.5862, -12.7757], - [28.7302, 49.1003, -48.3596], - [31.903, 5.692, -47.821999], - [35.075802, -34.432899, -16.280899], - [115.284103, 48.681499, 48.684101], - [110.842796, 28.4821, 49.176201], - [-19.1243, -69.0168, 49.420101], - [-38.2486, -66.275597, 17.776199], - [-111.024597, 52.604599, 46.225899], - [-72.113297, 35.491798, 30.871401], - [-66.192001, 80.898003, 55.394299], - [-114.025002, 87.673302, 58.9818], - [-97.804497, 116.560997, 73.978798], - [-52.608898, 30.3641, 42.556099], - [-16.7623, 58.010899, 58.078201], - [-106.881401, 31.945499, 46.9133], - [-108.6633, 43.2332, 46.315399], - [-113.484596, 38.6049, 49.121498], - [-101.216599, 15.9822, 46.308201], - [-16.6605, -16.2883, 93.618698], - [-23.926901, -2.5103, 86.736504], - [-40.775002, -10.2288, 85.276398], - [-61.180901, 8.8142, 76.996803], - [-39.719501, -28.927099, 88.963799], - [-14.8446, -52.6096, 140.113007], - [-15.2674, -62.32, 129.688004], - [-47.462502, -68.606102, 63.369701], - [-35.604198, -71.758003, 81.063904], - [-38.2486, -64.730202, 38.909901], - [-17.802099, -71.758003, 81.063904], - [-12.8928, -36.703499, 141.671997], - [-67.7668, -30.197001, 78.417801], - [-122.117996, -36.8894, 35.025002], - [-109.283997, -93.589897, 27.824301], - [-33.180698, 101.851997, 25.3186], - [-11.4565, -37.899399, 150.722], - [-70.236504, 62.836201, -3.9475], - [-28.7302, 91.731102, -24.972601], - [-47.263401, 54.293999, -27.414801], - [-69.167603, 6.5862, -12.7757], - [-28.7302, 49.1003, -48.3596], - [-31.903, 5.692, -47.821999], - [-35.075802, -34.432899, -16.280899], - [-115.284103, 48.681499, 48.684101], - [-110.842796, 28.4821, 49.176201] - ] -} diff --git a/app/build-types/beta/images/icon-128.png b/app/build-types/beta/images/icon-128.png index 97762ff99..95b2ec2c7 100644 Binary files a/app/build-types/beta/images/icon-128.png and b/app/build-types/beta/images/icon-128.png differ diff --git a/app/build-types/beta/images/icon-16.png b/app/build-types/beta/images/icon-16.png index 216b4ad06..e1c32722f 100644 Binary files a/app/build-types/beta/images/icon-16.png and b/app/build-types/beta/images/icon-16.png differ diff --git a/app/build-types/beta/images/icon-19.png b/app/build-types/beta/images/icon-19.png index f7da09c5e..5073efb79 100644 Binary files a/app/build-types/beta/images/icon-19.png and b/app/build-types/beta/images/icon-19.png differ diff --git a/app/build-types/beta/images/icon-32.png b/app/build-types/beta/images/icon-32.png index fb2a55a57..f0ac3fb28 100644 Binary files a/app/build-types/beta/images/icon-32.png and b/app/build-types/beta/images/icon-32.png differ diff --git a/app/build-types/beta/images/icon-34.png b/app/build-types/beta/images/icon-34.png new file mode 100644 index 000000000..bd70156f3 Binary files /dev/null and b/app/build-types/beta/images/icon-34.png differ diff --git a/app/build-types/beta/images/icon-38.png b/app/build-types/beta/images/icon-38.png index e9449d4d0..ae868f268 100644 Binary files a/app/build-types/beta/images/icon-38.png and b/app/build-types/beta/images/icon-38.png differ diff --git a/app/build-types/beta/images/icon-48.png b/app/build-types/beta/images/icon-48.png index 0fdfeb25c..306a7bce0 100644 Binary files a/app/build-types/beta/images/icon-48.png and b/app/build-types/beta/images/icon-48.png differ diff --git a/app/build-types/beta/images/icon-512.png b/app/build-types/beta/images/icon-512.png index 09690ab1b..0b9ccdc08 100644 Binary files a/app/build-types/beta/images/icon-512.png and b/app/build-types/beta/images/icon-512.png differ diff --git a/app/build-types/beta/images/icon-64.png b/app/build-types/beta/images/icon-64.png index b60b7d5d5..2bcda034c 100644 Binary files a/app/build-types/beta/images/icon-64.png and b/app/build-types/beta/images/icon-64.png differ diff --git a/app/build-types/beta/images/info-logo.png b/app/build-types/beta/images/info-logo.png index 97762ff99..a855a15b1 100644 Binary files a/app/build-types/beta/images/info-logo.png and b/app/build-types/beta/images/info-logo.png differ diff --git a/app/build-types/beta/images/logo/metamask-fox.svg b/app/build-types/beta/images/logo/metamask-fox.svg index 53698aefd..b6516605d 100644 --- a/app/build-types/beta/images/logo/metamask-fox.svg +++ b/app/build-types/beta/images/logo/metamask-fox.svg @@ -1,130 +1,36 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/components/ui/metafox-logo/horizontal-logo.js b/ui/components/ui/metafox-logo/horizontal-logo.js index 83940ef74..5c5de90e3 100644 --- a/ui/components/ui/metafox-logo/horizontal-logo.js +++ b/ui/components/ui/metafox-logo/horizontal-logo.js @@ -6,8 +6,8 @@ const LOGO_HEIGHT = 30; const TEXT_COLOR = 'var(--color-text-default)'; const FLASK_PILL_BACKGROUND = 'var(--color-overlay-alternative)'; const FLASK_PILL_TEXT = 'var(--color-overlay-inverse)'; -const BETA_PILL_BACKGROUND = 'var(--color-warning-default)'; -const BETA_PIL_TEXT = 'var(--color-secondary-inverse)'; +const BETA_PILL_BACKGROUND = 'var(--color-primary-default)'; +const BETA_PIL_TEXT = 'var(--color-primary-inverse)'; export default function MetaFoxHorizontalLogo({ className }) { switch (process.env.METAMASK_BUILD_TYPE) { @@ -16,462 +16,304 @@ export default function MetaFoxHorizontalLogo({ className }) { - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + diff --git a/ui/components/ui/metafox-logo/metafox-logo.stories.js b/ui/components/ui/metafox-logo/metafox-logo.stories.js new file mode 100644 index 000000000..5305eaf30 --- /dev/null +++ b/ui/components/ui/metafox-logo/metafox-logo.stories.js @@ -0,0 +1,33 @@ +import React from 'react'; + +import Typography from '../typography'; + +import MetaFoxLogo from '.'; + +export default { + title: 'Components/UI/MetaFoxLogo', + id: __filename, + argTypes: { + onClick: { + action: 'onClick', + }, + unsetIconHeight: { + control: 'boolean', + }, + isOnboarding: { + control: 'boolean', + }, + }, +}; + +export const DefaultStory = (args) => ( + <> + + + To view the different logo types change the build type in: + ui/components/ui/metafox-logo/horizontal-logo.js + + +); + +DefaultStory.storyName = 'Default'; diff --git a/ui/helpers/utils/build-types.js b/ui/helpers/utils/build-types.js index 8577b3905..2bcd7a8ae 100644 --- a/ui/helpers/utils/build-types.js +++ b/ui/helpers/utils/build-types.js @@ -1,6 +1,3 @@ -///: BEGIN:ONLY_INCLUDE_IN(beta) -import betaJson from '../../../app/build-types/beta/images/beta-mascot.json'; -///: END:ONLY_INCLUDE_IN ///: BEGIN:ONLY_INCLUDE_IN(flask) import flaskJson from '../../../app/build-types/flask/images/flask-mascot.json'; ///: END:ONLY_INCLUDE_IN @@ -12,7 +9,7 @@ const assetList = { }, ///: BEGIN:ONLY_INCLUDE_IN(beta) beta: { - foxMeshJson: betaJson, + foxMeshJson: undefined, }, ///: END:ONLY_INCLUDE_IN ///: BEGIN:ONLY_INCLUDE_IN(flask) diff --git a/ui/pages/unlock-page/index.scss b/ui/pages/unlock-page/index.scss index 745b68350..d046bd66a 100644 --- a/ui/pages/unlock-page/index.scss +++ b/ui/pages/unlock-page/index.scss @@ -18,6 +18,20 @@ &__mascot-container { margin-top: 24px; + position: relative; + + &__beta { + /* these colors should be used on both light and dark mode */ + background: var(--brand-colors-blue-blue500); + color: var(--brand-colors-white-white000); + padding: 3px 6px; + font-size: 16px; + position: absolute; + bottom: 10px; + right: 0; + border-radius: 10px; + text-transform: uppercase; + } } &__title { diff --git a/ui/pages/unlock-page/unlock-page.component.js b/ui/pages/unlock-page/unlock-page.component.js index 33a3aff83..996ba04f8 100644 --- a/ui/pages/unlock-page/unlock-page.component.js +++ b/ui/pages/unlock-page/unlock-page.component.js @@ -12,6 +12,7 @@ import { CONTEXT_PROPS, } from '../../../shared/constants/metametrics'; import { SUPPORT_LINK } from '../../../shared/lib/ui-utils'; +import { isBeta } from '../../helpers/utils/build-types'; export default class UnlockPage extends Component { static contextTypes = { @@ -176,6 +177,11 @@ export default class UnlockPage extends Component { width="120" height="120" /> + {isBeta() ? ( +
+ {t('beta')} +
+ ) : null}

{t('welcomeBack')}

{t('unlockMessage')}